Question

我想知道为什么在“display：table;”上使用填充没有像我预期的那样工作; - ）。

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

<div class="table">
  <div class="table-cell">
    Why is the padding working like shit?
  </div>
</div>

以下是jsfiddle： http://jsfiddle.net/7n38t/

正如你可以看到“填充：10px;” on“.table”导致表格大于框架......并出现水平滚动条。

为什么会这样反应？我不想为此做一个解决方法，因为我有一个，但我真的想了解原因！

谢谢，巴斯蒂安

Answer 1

将框大小设置为边框框将解决您的问题：

在小提琴中查看：http://jsfiddle.net/7n38t/3/

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
    box-sizing: border-box; /* this guy!! */
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

Answer 2

使用CSS设置元素的宽度和高度属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须添加填充，边框和边距。

价：http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

您可以在表格元素上使用边框间距而不是填充（框架模型对表格的行为有所不同）。

border-spacing:10px;

CSS表/表格单元格和填充？

3 个答案: