DIVにパディングやボーダーを追加し、幅と高さを保持する方法は？

Question

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

を使用することができますインターナショナルlを幅と高さに合わせることができますが、余白は追加されます。

、ここcss tricks

Answer 2

はいあなたの問題を解決するには、ボックスのサイズ変更は、あなたの更新Fiddle

より多くの情報：ボーダーボックス; （http://css-tricks.com/box-sizing/,http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html）

Answer 3

サポートする必要のあるブラウザによっては、これらのDIVのボックスサイズ属性を境界線ボックスに変更することができます。これは、あなたが設定した寸法に影響するパディングやボーダーなしで、各ボックスに高さと幅を設定することを可能にします。

これは、リセットする際にすべての要素に対してこれをグローバルに設定することが推奨されています。これは、スタイルをもっと簡単にするためです（おそらくデフォルトよりも優れたボックスサイズのモデルです）。はいちょうど高さと幅から2回パディングやボーダーを引くhttp://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

：ブラウザのサポートといくつかの一般的な警告などの詳しい情報は、ここで見つけることができ

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

フィドル例：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 */