如何添加填充或邊界的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 */