CSS box-sizing paddingとborderの表示方法を指定

box-sizingで、paddingとborderの表示方法を指定するサンプルです。

目次

仕様 box-sizingプロパティの仕様
サンプル 幅と高さにパディングとボーダー領域を含まない (content-box)
  幅と高さにパディングとボーダー領域を含む (border-box)

box-sizingプロパティの仕様

box-sizing : 値

box-sizingプロパティは、パディングとボーダーの表示方法を指定します。

説明
content-box   幅と高さにパディングとボーダー領域を含みません。(初期値)
(幅と高さにパディングとボーダーが別に追加される)
border-box 幅と高さにパディングとボーダー領域を含みます。
(幅と高さ=幅と高さ(パディングとボーダー分減る)+パディングとボーダーになる)
値を継承しない

初期値は、content-boxです。
以下はMDNのbox-sizingプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

幅と高さにパディングとボーダー領域を含まない (content-box)

<style>
  .box1 {
    width: 300px;
    height: 100px;
    padding: 5px;
    border: 5px solid rgb(51, 107, 160);
    box-sizing: content-box; /* パディングとボーダーを含まない */
  }
</style>
<div class="box1">box-sizing:content-box</div>

3行目は、widthに300pxを指定しています。

四角は300☓100ですが、その周りのborderとpaddingで上下左右に5pxずつ入っているので全体の四角としては、幅は320pxに高さは120pxになります。

content-box指定する場合は、幅と高さに、パディング、ボーダー領域を含まないということになります。

幅と高さにパディングとボーダー領域を含む (border-box)

<style>
  .box2 {
    width: 300px;
    height: 100px;
    padding: 5px;
    border: 5px solid #000;
    box-sizing: border-box; /* パディングとボーダーを含む */
  }
</style>
<div class="box2">box-sizing:border-box</div>

3行目は、widthに300pxを指定しています。

widthの指定は300pxですが四角は280☓80とwidthが減っています。
その周りにborderとpaddingで上下左右に5pxずつ入っているので全体の四角としては、幅は300px、高さは100pxになります。

border-boxは、幅と高さに、パディング、ボーダー領域を含むということになります。
→borderまでをboxにする。

関連の記事

CSS border-collapse テーブルの枠線を重ねる/離す
CSS border ボーダーの表示方法を指定する

△上に戻る