Css 如何为DIV添加填充或边框并保持宽度和高度？

有没有办法保持一个DIV的设置宽度/高度，并在不增加DIV的情况下填充内容？见下面的例子。我希望所有的盒子都精确到140x140

HTML:

小提琴：是的，你可以用

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

更改长方体模型，使边框和填充位于宽度/高度的内部，但仍会添加边距

和你的最新

---

此处的更多信息

是的，问题的解决方案是框大小：边框框；（，）（适用于IE8+和所有现代浏览器）

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

一些人建议在重置中为所有元素全局设置此选项，因为它使样式更容易设置（并且可以说是比默认设置更好的框大小调整模型）。要做到这一点，您可以使用以下方法：

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

---

更多信息，包括浏览器支持和一些一般警告，可在此处找到：

是，只需从高度和宽度中减去两倍的填充或边框即可。换句话说，从

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;
}

小提琴示例：

或使用
框大小：边框框
最干净的方法可能是将
标记嵌套在当前的
标记中，并对其应用填充：

<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>​

Dampsquid打了我一秒钟：/n你的例子是正确的，但你没有提到。如果你加上我的反对票，我将删除我的反对票。有很多来源，添加了我使用过的其中一个，在google中排名第一的box sizingYes，但是你从那里粘贴了示例，包括评论，所以你应该提到来源。删除了Downvote。比hacks好得多，并且在浏览器间保持一致！
.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;
}

<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>​

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