如何向 DIV 添加填充或边框并保持宽度和高度？答案

【问题标题】：How to add padding or border to a DIV and keep width and height?如何向 DIV 添加填充或边框并保持宽度和高度？
【发布时间】：2019-01-12 18:47:39
【问题描述】：

有没有办法为 DIV 保持设置的宽度/高度，并在 DIV 不增长的情况下填充内容？请参见下面的示例。我希望所有的框都是 140x140。

HTML：

<div class="box1">Howdy.</div>
<div class="box2">Howdy.</div>
<div class="box3">Howdy.</div>

CSS：

.box1 {
    width: 140px;
    height: 140px;
    background: #f66;
}

.box2 {
    width: 140px;
    height: 140px;
    background: #66f;
    padding: 1em;
}

.box3 {
    width: 140px;
    height: 140px;
    background: #6f6;
    border: 1em solid #000;
}

小提琴：http://jsfiddle.net/Wrc5S/

【问题讨论】：

标签： css

【解决方案1】：

是的，你可以使用

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

更改盒子模型以在宽度/高度内部设置边框和填充，但仍会添加边距。

还有你更新的Fiddle

更多信息在这里css tricks

【讨论】：

你的例子是正确的，但你没有提到source。如果您添加，我将删除我的反对票。
有很多资源，添加了一个我用过的资源，在谷歌中排名第一
是的，但是您从那里粘贴了示例，包括 cmets，因此您应该提及来源。已删除反对票。

【解决方案2】：

是的，只需从高度和宽度中减去两倍的填充或边框。换句话说，从div 的每一侧减去填充或边框：

.box1
{
    width: 140px;
    height: 140px;
    background: #f66;
}

.box2
{
    width: 130px;
    height: 130px;
    background: #66f;
    padding: 5px;
}

.box3
{
    width: 130px;
    height: 130px;
    background: #6f6;
    border: 5px solid #000;
}

小提琴示例：http://jsfiddle.net/N6BYH/

或者使用box-sizing: border-box;https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。

【讨论】：

【解决方案3】：

根据您需要支持的浏览器，您可以将这些 DIV 上的 box-sizing 属性更改为边框框。这将允许您在每个框上设置高度和宽度，而填充或边框不会影响您设置的尺寸。

一些人建议为重置中的所有元素全局设置此值，因为它使样式更容易设置（并且可以说是比默认值更好的盒子大小模型）。为此，您可以使用以下内容：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

可以在此处找到更多信息，包括浏览器支持和一些一般警告：http://paulirish.com/2012/box-sizing-border-box-ftw/

【讨论】：

【解决方案4】：

最干净的方法可能是将<div>标签嵌套在您当前的<div>标签中，并对其应用填充：

<div class="box" id="box1"><div>Howdy.</div></div>
<div class="box" id="box2"><div>Howdy.</div></div>
<div class="box" id="box3"><div>Howdy.</div></div>

CSS：

.div { /* ... */ }
.div > div { padding: 1em; } /* Apply to all inner divs */
#box2 > div { padding: 1em; } /* Only apply to the inner div in #box2 */

【讨论】：

比 hacks 好得多，并且跨浏览器保持一致！

【解决方案5】：

是的，您的问题的解决方案是 box-sizing:border-box; (http://css-tricks.com/box-sizing/,http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html)（适用于 IE8+ 和所有现代浏览器）

【讨论】：

Dampsquid 打败了我 1 秒：/