Padding Between "display:table-cell" [closed]

Question

Is there a way to place padding or a transparent border around the "cells" when one does display:table-cell? I would like the background to show up through this space, so I can't just set the border to white, and border-color:transparent doesn't work for me for some reason. I've checked w3schools and similar sites but I haven't been able to find this particular trait.

From user Praveen Vijayan: http://jsfiddle.net/geymU/

Answer 1

Use border-spacing: 10px on the parent container.

In your case

#nav ul{
    display:table;
    width:100%;
    border-spacing: 10px;
}

You can also give top/bottom and left/right separately like border-spacing: 10px 20px;

Answer 2

The space between cells is controlled by the border-spacing and border-collapse properties in the table.

#nav ul {
    display: table;
    width: 100%;
    background: yellow;
    border-collapse: separate;
    border-spacing: 12px 6px;
}