CSSボックスサイズ

CSS

CSSボックスサイズの指定について

width、heightは通常コンテンツボックスのサイズを指定するのですが
CSS設定でボーダー外側までのサイズを指定に変更できる

※規定のボックスサイズはコンテンツボックスのサイズを指定することになる

変更でwidth、height の指定サイズが矢印の範囲になる

※代替えボックスとしてborder までのサイズ指定に変更できる

なぜ必要なのか、どんな時に必要なのかを考えてみました

たとえば、imgボックスにpadding,borderを設定してwidthを100%にブラウザーいっぱいにした場合paddingから外側がはみ出してしまいます

CSS
img {
width:100%;
border: 10px blue solid;
padding: 5px;
}
※右端がオーバーフローして表示されていない

全体を表示させる場合はサイズを計算して調整しなければならない
そんな時にborderまでのサイズにするとはみ出さずに表示できる

box-sizing: border-box;

※box-sizeの一行を追加する

CSS
img {
width:100%;
border: 10px blue solid;
padding: 5px;
box-sizing: border-box;
}

width:100%;でボックスがborderまでの指定になる

他にもテキストコンテンツボックスとのサイズ合わせ等に使えると思います

また、今回指定はCSSの個別のCSS宣言ブロック内で行いましたが、htmlなどの親要素で指定してデフォルトをborder-boxにしておくと言うこともできます

コメント