box-sizing

box-sizingは、ボックスサイズの計算方法を指定するスタイルです。

解説

heightやwidthのサイズの計算方法を指定できます。

初期値ではheightやwidth値にpadding値やborder値は含まれないので、
例えばdivのCSSにheight:300pxと指定していても、
padding値が10px、border値が1pxならdivの高さは322pxになります。

padding値やborder値を含めて高さを300pxにしたい場合は、
border-sizing:border-box;を指定すればOKです。

構文

構文は以下になります。

値

box-sizingには以下の値が指定できます。

太字の値は初期値です。

サンプル

div要素のサイズをpadding値、border値含めて200px x 100pxにする

.sample01 {
  box-sizing:border-box;
  width:200px;
  height:100px;
  padding:30px;
  border:1px solid black;
}

<div class="sample01">あいうえおかきくけこさしすせそたちつてとなにぬねの</div>

height、widthの値を優先するので入り切らない分ははみ出します。

div要素のサイズをpadding値、border値含めずに200px x 100pxにする

.sample02 {
  box-sizing:content-box;
  width:200px;
  height:100px;
  padding:30px;
  border:1px solid black;
}

<div class="sample02">あいうえおかきくけこさしすせそたちつてとなにぬねの</div>

height、widthのサイズ＋paddingサイズ＋borderサイズになります。

備考

• box-sizing: border-boxを指定するとボックスのサイズが、
  paddingやborderのサイズに影響されなくなるため指定することをおすすです。

関連項目

• height：要素の高さを指定する
• width：要素の幅を指定する
• padding：要素の内側の余白を指定する

Tweet