2

如何在 CSS 中设置为 display:table-cell 的非表格元素上的单元格间距？ http://jsfiddle.net/David_Knowles/ysYZJ/

<dl>
    <dt>Definition title 1</dt>
    <dd>def detail 1.1</dd>
</dl>
<dl>
    <dt>Definition title 2</dt>
    <dd>def detail 2.1</dd>
    <dd>def detail 2.2</dd>
</dl>

dl {display:table-cell; margin:1em; background-color: #eee; vertical-align: top; padding:1em;} 
dt {margin: 2px 0; padding:1em; font-weight: bold;}
dd {margin: 2px 0; padding:1em; }

编辑：我很好奇为什么border-spacing在这种情况下不起作用？

4

2 回答 2

2

仅display:table-cell在元素上使用会在其周围创建一个不可见（和匿名）的表。你可以border-spacing为你的 DL 标签创建一个 DIV 容器，使用display:table和border-spacing:(value)

正如 BoltClock 所提到的，边框间距样式仅适用于表格，因此您只需创建一个包含表格单元格的表格。

CSS

DIV {
  display:table;
  border-spacing:5px;
  border-collapse:separate; /* just to be sure */
}

如您的小提琴的修改版本所示：http: //jsfiddle.net/Nv4Fh/

于 2013-05-18T18:01:20.440 回答
0

单元格间距基本上设置单元格元素之间的边距，所以你只需要自己做：

dl, dt, dd{
    background-color:#ccc; /* Just to see what's going on */
}
dl{
    margin-left:10px;  /* vertical gap cellspacing */
}
dl:last-child{
    margin-right:10px;
}
dt,dd{
    margin-top:10px; /* horizontal gap cellspacing */
}
dd:-child{
     margin-bottom:10px;   
}
于 2013-05-18T15:32:45.737 回答