ボックスモデル

幅、高さ、パディング、ボーダー

CSS のブロック要素に対する基本的なプロパティ、width、height、padding、border プロパティについて説明し、それぞれの例を示します。

width プロパティ width プロパティは、要素の横幅を指定します。指定できる値としては、ピクセル（px）、パーセンテージ（%）、ビュー幅（vw）などがあります。

.box {
width: 300px; /_ 要素の幅を 300 ピクセルに設定 _/
}

height プロパティ height プロパティは、要素の高さを指定します。こちらも、指定できる値としては、ピクセル（px）、パーセンテージ（%）、ビュー高さ（vh）などがあります。

.box {
height: 200px; /_ 要素の高さを 200 ピクセルに設定 _/
}

padding プロパティ padding プロパティは、要素の内側の余白を指定します。値としては、ピクセル（px）、パーセンテージ（%）などを指定できます。また、上下左右の余白を個別に指定することもできます（padding-top、padding-right、padding-bottom、padding-left）。

.box {
padding: 20px; /_ すべての方向に 20 ピクセルの内側余白を設定 _/
}

border プロパティ border プロパティは、要素の境界線を指定します。境界線の幅（width）、スタイル（style）、色（color）を組み合わせて指定します。

.box {
border: 2px solid #000; /_ 幅が 2 ピクセル、スタイルが実線、色が黒の境界線を設定 _/
}

統合例：これらのプロパティを組み合わせて、div 要素にスタイルを適用する例を示します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box {
        width: 300px; /* 幅を300ピクセルに設定 */
        height: 200px; /* 高さを200ピクセルに設定 */
        padding: 20px; /* すべての方向に20ピクセルの内側余白を設定 */
        border: 2px solid #000; /* 幅が2ピクセル、スタイルが実線、色が黒の境界線を設定 */
      }
    </style>
    <title>CSS Example</title>
  </head>
  <body>
    <div class="box">
      This is a box with specified width, height, padding, and border.
    </div>
  </body>
</html>

この統合例では、div 要素に幅、高さ、パディング、ボーダーが適用されています。このようにして、要素の見た目やレイアウトを制御することができます。

代替ボックスモデル

上記の例では、最終的なボックスの幅と高さが直感とズレます。具体的には幅は、 width: 300px 　＋　 padding: 20px 　＋　 border: 2px 　の 322px になります。これは、box-sizing プロパティがデフォルトの content-box となっているためです。そこで、box-sizing プロパティの値を border-box に設定します。近年、後述するレイアウトについて、flexbox,grid レイアウトが主流となりました。これらのレイアウトと親和性が高いのが、border-box です。

/* 代替ボックスモデルの設定 */
* {
  box-sizing: border-box;
}

このように、すべてのボックス要素をボーダーボックスとします。インライン要素にも影響します。

その他：マージン

margin というプロパティがありますが、flex,grid レイアウトではボーダーボックスのパディングなどで代用できます。新規には使うことはおすすめしません。

インライン要素は、その子要素としてボックス要素を入れられない（a 要素は除く）、サイズが指定できない、（img,label,textarean などは除く）、　 padding は非推奨、などなど、扱いが複雑なためです。代替ボックスモデルを設定すると、インライン要素もインラインボックスとしてボックス要素として扱えるようになります。要素のレイアウトを横に並べたい場合は、その時だけ display:inline とするか、 flex,grid レイアウトを活用することで実現できます。