CSS - 显示表上的填充溢出其容器答案

【问题标题】：CSS - Padding on Display table overflow its containerCSS - 显示表上的填充溢出其容器
【发布时间】：2017-09-12 05:24:42
【问题描述】：

示例：http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php

为什么每当我添加填充时，表格 div 会从其容器中取出？

有没有办法解决这个问题？

<style>
.foroContainer {
    width: 700px;
    margin-left: auto; 
    margin-right: auto; 
    background: yellow;
}

.foroContainer .table{
    display: table;
    width: 100%;
    padding: 8px;
    border: 1px solid #a9a9a9;
    margin-bottom: 1em;
}

.foroContainer .row{
    display: table-row;
}

.foroContainer .cell{
    display: table-cell;
}

#right.cell{
    text-align: right;
    border-top: 1px solid #a9a9a9;
}
}
</style>

<div class="foroContainer">
<div class="table">
    <div class="row">
        <div class="cell">asdasdasdas</div>
    </div>
    <div class="row">
        <div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
    </div>
</div>

【问题讨论】：

我无法重现您的问题（或正确理解它）。填充到桌子上？对我保持包容（在 Chrome 中）。你用什么浏览器测试？
试过here。我将表格 div 的 padding 增加到 80px，并且没有发生溢出。
我正在使用 Firefox 13。这是我所看到的：img209.imageshack.us/img209/7490/thisrs.png KiiroSora09 给了我相同的结果

标签： css padding css-tables

【解决方案1】：

或者，您可以尝试更改 box-sizing 属性，无论是针对页面上的每个元素，还是仅针对那个容器。例如。对于页面上的每个元素，您可以编写：

* { box-sizing: border-box; }

这将改变浏览器使用的默认框模型，以便元素的宽度不会改变，无论是否填充。

【讨论】：

【解决方案2】：

CSS 中的封装层次是：边距 - 边框 - 填充

当您向对象添加填充时，您实际上会改变它的宽度。如果某物的宽度为 100px，并且您添加了 padding:10px，它的宽度将变为 120px（100 + 10 padding-left + 10 padding right）

这就是你的容器被推过去的原因（它的宽度：100%），一个好的方法是你的桌子内部的另一个容器，宽度为：100%，但桌子没有宽度。

【讨论】：