如何添加填充或边界的DIV，并保持宽度和高度？

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

改变盒模型，使边框和填充INTERNA升到你的宽度/高度，但边距仍然添加。

和更新的Fiddle

点击此处了解详情css tricks

Answer 2

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

Answer 3

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

曾有人建议由少数人来，因为它使事情变得更容易的风格（可以说是一个更好的盒子规模模型比默认），用于复位所有元素设置此全局。要做到这一点，你会使用类似：

* { 
    -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的每一侧上的填充或边框）：

.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/

Answer 5

最干净的方法很可能是巢<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 */