Relleno entre "display: table-cell"

Question

¿Hay alguna manera de colocar relleno o un borde transparente alrededor de las "celdas" cuando se hace display:table-cell? Me gustaría que el fondo se muestre a través de este espacio, por lo que no puedo simplemente establecer el borde en blanco, y border-color:transparent no funciona para mí por algún motivo. Revisé w3schools y sitios similares, pero no he podido encontrar este rasgo en particular.

Desde usuario Praveen Vijayan: http://jsfiddle.net/geymU/

Answer 1

Uso border-spacing: 10px en el contenedor principal.

En su caso

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

También puede dar arriba/abajo e izquierda/derecha por separado como border-spacing: 10px 20px;

Answer 2

El espacio entre las células es controlado por los border-spacing y border-collapse propiedades en la tabla.

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