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

Question

我想知道为什么在“显示:表格；”上使用填充没有像我预期的那样工作 ;-)。

.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/

如您所见，“padding: 10px;”在“.table”上会产生一个比框架大的表格......并且出现水平滚动条。

为什么会这样？？我不想解决这个问题，因为我有一个解决方法，但我真的很想知道为什么!

谢谢， 巴斯蒂安

Answer 1

将 box-sizing 设置为 border box 将解决您的问题:

快速查看: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;
}