Points & Lines

【CSS】box-sizingプロパティ

ボックスモデルを使用したレイアウトが崩れてしまう場合など
borderとpaddingで指定する幅の取り方を変えることができる
box-sizingプロパティについてメモ。


CSSのボックスモデルを使ったレイアウトでは通常、

の合計がそのHTML要素の幅となる。

ブロック要素 (divタグなど) に適応したスタイルのプロパティ
※box-sizing : content-box(初期値)と同じ状態

.box{
  width:200px;
  height:200px;
  margin:30px;
  padding:30px;
  border:10px solid #333;
}

google chrome デベロッパーツールで確認する。

各プロパティで設定した幅が独立している。
(widthが200px、左右のpadding、marginが計120px、
左右のボーダーの幅が20pxで要素の幅は340pxとなる。)


box-sizingプロパティの値をborder-boxにする

box-sizing:border-box とすると
通常はコンテンツの外側に足されて計算されるborderpaddingの幅が
コンテンツ自体の幅に含まれるようになる。

borderとpaddingの幅を気にせず、レイアウトを組む際はこちらが便利である。

.box{
  width:200px;
  height:200px;
  margin:30px;
  padding:30px;
  border:10px solid #333;

  box-sizing: border-box;  /*paddingとborderをコンテンツに含める*/
}

google chrome デベロッパーツールで確認する。

borderとpaddingの幅計、80pxがコンテンツに含まれてる事が確認出来る。
(要素の幅は元の340pxから80px引いた260pxとなる)

Follow me!

モバイルバージョンを終了