CSSボックスのサイズ設定
CSSボックスのサイズ設定
CSSbox-sizing
プロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。
CSSボックスサイズ設定プロパティなし
デフォルトでは、要素の幅と高さは次のように計算されます。
幅+パディング+境界線=要素の実際の幅
高さ+パディング+境界線=要素の実際の高さ
つまり、要素の幅/高さを設定すると、要素は設定したよりも大きく表示されることがよくあります(要素の境界線とパディングが要素の指定された幅/高さに追加されるため)。
次の図は、指定された幅と高さが同じ2つの<div>要素を示しています。
このdivは小さくなります(幅は300ピクセル、高さは100ピクセル)。
このdivは大きくなります(幅も300px、高さは100pxです)。
上記の2つの<div>要素は、結果のサイズが異なります(div2にはパディングが指定されているため)。
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
box-sizing
プロパティはこの問題を解決します。
CSSボックスサイズ設定プロパティを使用
このbox-sizing
プロパティを使用すると、要素の幅と高さの合計にパディングと境界線を含めることができます。
要素に設定した場合box-sizing: border-box;
、パディングと境界線は幅と高さに含まれます。
両方のdivが同じサイズになりました!
やったー!
これは上記と同じ例ですが、box-sizing: border-box;
両方の<div>要素に追加されています。
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
を使用した結果box-sizing: border-box;
は非常に優れているため、多くの開発者は、ページ上のすべての要素がこのように機能することを望んでいます。
以下のコードは、すべての要素がこのより直感的な方法でサイズ設定されることを保証します。多くのブラウザはすでにbox-sizing: border-box;
多くのフォーム要素に使用しています(すべてではありません-そのため、入力とテキスト領域は幅で異なって見えます:100%;)。
これをすべての要素に適用することは安全で賢明です。
例
* {
box-sizing: border-box;
}
CSSボックスのサイズ設定プロパティ
Property | Description |
---|---|
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |