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

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

box-sizingとは

box-sizingは、padding(パディング)とborder(ボーダー)の表示方法を指定します。

書き方 box-sizing : 値
content-box  
幅と高さにパディングとボーダー領域を含みません。
(幅と高さにパディングとボーダーが別に追加される)
border-box
幅と高さにパディングとボーダー領域を含みます。
(幅と高さ=幅と高さ(パディングとボーダー分減る)+パディングとボーダーになる)
初期値 content-box  
継承 しない
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

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

content-boxを指定しています。

四角はwidthは300でheightは100です。

その周りのborderとpaddingで上下左右に5ずつ入っているので全体の四角としては、widthは320でheightは120になります。

幅と高さに、パディング、ボーダー領域を含まないということになります。

<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>

 

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

border-boxを指定しています。

四角はwidthは300でheightは100を指定しましたが図の青い四角の箇所は280☓80と減っています。

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

幅と高さに、パディング、ボーダー領域を含むということになります。

<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>

関連の記事

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

△上に戻る