Question

是否有某种方法可以保持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/

Answer 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

Answer 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。

Answer 3

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

有些人建议在重置时为所有元素设置全局，因为它使样式更容易（并且可以说是比默认值更好的盒子大小模型）。要做到这一点，你可以使用类似的东西：

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

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

Answer 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 */

Answer 5

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

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

5 个答案: