在不改变整体宽度的情况下添加填充答案

【问题标题】：Add padding without changing overall width在不改变整体宽度的情况下添加填充
【发布时间】：2013-03-01 06:09:17
【问题描述】：

如何在不添加预定义宽度的情况下向元素添加填充？

最好定义一列的宽度来为布局制作一个干净的网格；但也想为列内的内容添加填充。有什么方法可以指定吗？

【问题讨论】：

我认为在预定义宽度和填充之上添加的边距没有......

【解决方案1】：

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

【解决方案2】：

使用 box-sizing，它使 padding 包含在内： https://developer.mozilla.org/en-US/docs/CSS/box-sizing

例子：

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

值得注意的是，这不适用于 IE7。

IE8请看本Q置顶答案：box-sizing: border-box => for IE8?

【讨论】：

w3schools 是一个糟糕的资源。使用 MDN。
对于浏览和阅读的人，我查看了 w3schools 的信息，发现：w3fools.com - 强烈建议阅读它，因为它解释了 Jan Dvorak 的声明。
见w3fools.com。 w3schools 的一些失败已得到纠正，但其中许多仍然存在，而且新的失败肯定会不断出现。
所使用的参考文献是答案的一部分，对它们进行评分肯定没问题。没有多少资源拥有如此糟糕的声誉，但 w3schools（大约是唯一的）确实如此。
我不同意，这取决于它过去是如何诚实的。在这种情况下，它被使用，我链接到的页面上没有错误，我在答案中发布了代码和答案，该链接仅用于提供更多信息。见这里：meta.stackexchange.com/questions/87678/…

【解决方案3】：

每次向块元素添加填充时，该元素的宽度都会发生变化。这个问题有很多解决方案。我通常将margin 设置为第一个子元素，并将width: 100% 设置为该元素。

例如，我们有：

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

这些元素的 CSS 样式：

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

这是任何浏览器的解决方案

【讨论】：

这确实是 W3C 团队在设计布局模型时想到的解决方案。事实上，我从未使用过 box-sizing 属性。

【解决方案4】：

这是一个旧线程，我知道。但是上次我有一个完整的黑洞，关于制作一个没有设置宽度和填充的 DIV，所以它不会炸毁我的 3 列行和 CSS2。所以我放了一个左浮动的DIV，右浮动的DIV，在它们之间放置一个没有浮动且没有固定宽度的DIV，但我想在其中添加填充。怎么样...

我放弃了。 :D 但是我在中间放了一个内部 DIV 并给它 width=90%。到目前为止一切都很好，一个非常简单但不是很好的解决方案，但有时它有助于实现您需要的外观。 ;]

b.r.

【讨论】：