在“display：table-cell”之间填充

Question

当有人display:table-cell时，是否有办法在“单元格”周围放置填充或透明边框？我想通过这个空间显示背景，所以我不能只将边框设置为白色，border-color:transparent因某些原因对我不起作用。我检查了w3schools和类似的网站，但我没能找到这个特殊的特征。

来自用户 Praveen Vijayan ：http://jsfiddle.net/geymU/

Answer 1

在父容器上使用border-spacing: 10px。

在你的情况下

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

您还可以像border-spacing: 10px 20px;

一样单独给出上/下和左/右

Answer 2

单元格之间的空格由表格中的border-spacing和border-collapse属性控制。

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