CSS 如何向 DIV 添加填充或边框并保持宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9675478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add padding or border to a DIV and keep width and height?
提问by CaptSaltyHyman
Is there some way to keep a set width/height for a DIV, and pad the content without the DIV growing? See example below. I want all the boxes to be exactly 140x140.
是否有某种方法可以为 DIV 保持设置的宽度/高度，并在不增加 DIV 的情况下填充内容？请参阅下面的示例。我希望所有的盒子都是 140x140。
HTML:
HTML：
<div class="box1">Howdy.</div>
<div class="box2">Howdy.</div>
<div class="box3">Howdy.</div>?
CSS:
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;
}
Fiddle: http://jsfiddle.net/Wrc5S/
回答by Dampsquid
Yes you can use
是的，你可以使用
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
to change the box model to make borders and padding internal to your width/height, but margins are still added.
更改框模型以在宽度/高度内部制作边框和填充，但仍会添加边距。
and your updated Fiddle
和你更新的小提琴
more information here css tricks
这里有更多信息css 技巧
回答by Remote
Yes just subtract twice the padding or border from the height and width. In other words, subtract the padding or border from each side of the div:
是的，只需从高度和宽度中减去两倍的填充或边框。换句话说，从 的每一侧减去填充或边框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;
}
fiddle example: http://jsfiddle.net/N6BYH/
小提琴示例：http: //jsfiddle.net/N6BYH/
Or use box-sizing: border-box;https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.
或者使用box-sizing: border-box;https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。
回答by Matthew Darnell
Depending on what browsers you need to support, you could change the box-sizing attribute on these DIVs to be border-box. That will allow you to set a height and a width on each box, without the padding or borders effecting the dimensions you set.
根据您需要支持的浏览器，您可以将这些 DIV 上的 box-sizing 属性更改为 border-box。这将允许您在每个框上设置高度和宽度，而填充或边框不会影响您设置的尺寸。
It has been suggested by a few people to set this globally for all elements in a reset because it makes things a lot easier to style (and is arguably a better box-sizing model than the default). To do this, you would use something like:
一些人建议在重置中为所有元素全局设置它，因为它使事情更容易设计（并且可以说是比默认值更好的框大小模型）。为此，您将使用以下内容：
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
More information, including browser support and some general warnings can be found here: http://paulirish.com/2012/box-sizing-border-box-ftw/
更多信息，包括浏览器支持和一些一般警告可以在这里找到：http: //paulirish.com/2012/box-sizing-border-box-ftw/
回答by Wex
The cleanest method would probably be to nest <div>tags within your current <div>tags, and apply the padding to them:
最干净的方法可能是<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:
CSS：
.div { /* ... */ }
.div > div { padding: 1em; } /* Apply to all inner divs */
#box2 > div { padding: 1em; } /* Only apply to the inner div in #box2 */
回答by George Katsanos
Yes the solution to your problem is box-sizing:border-box; ( http://css-tricks.com/box-sizing/, http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html) (works in IE8+ and all modern browsers)
是的，您的问题的解决方案是 box-sizing:border-box; （http://css-tricks.com/box-sizing/，http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html）（适用于 IE8+ 和所有现代浏览器）
