[HTML & CSS General] Box model を border-box 指定で扱いやすくする
ちょっと調べたのでまとめておく。
Box model と boxsizing 仕様。
- content-box
- CSS 標準仕様に於ける規定値。width と height プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、ボーダー、マージン領域を含みません。
- border-box
- width と height プロパティによって定義される領域内にパディング領域及びボーダー領域が含まれます。マージン領域は含まれません。これは Internet Explorer 5.5 の 既定のボックスモデルと同じ計算方法であり、また、現行バージョンに於いても 後方互換モード (Quirks mode) を選択した際はこの計算方法が採られます。
box-sizing: border-box; で要素のpaddingとborderの幅が要素のwidthを増やす事がなくなる。
border-box 指定のベストプラクティス。
See the Pen box-sizing by DriftwoodJP (@DriftwoodJP) on CodePen.