CSSリファレンス

box-sizingの意味と使い方

「box-sizing」はボックスの幅(width)と高さ(height)の算出方法を指定します。

値の指定方法

content-box

widthプロパティとheightプロパティ(min-width、min-height、max-width、max-height、プロパティを含む)の値を、ボックスの内容領域と幅と高さとして適用します。ボーダー領域とパディング領域は含まれません。


padding-box

widthプロパティとheightプロパティ(min-width、min-height、max-width、max-heightプロパティを含む)の値を、ボックスのパディング領域までの幅と高さとして適用します。ボーダー領域とマージン領域は含まれません。


border-box

widthプロパティとheightプロパティ(min-width、min-height、max-width、max-heightプロパティ含む)の値を、ボックスのボーダー領域までの幅と高さとして適用します。


関連プロパティ

  • width:内容領域の幅を指定する
  • height:内容領域の高さを指定する