Margin, Border, Padding の完全網羅

1. ボックスモデルの構造

CSSの要素は、以下の図のように「入れ子」構造になっています。この重なり順を理解することが、レイアウト崩れを防ぐ第一歩です。

Margin（外側の余白 / オレンジの部分）
Border（境界線 / 黄色の部分）
Padding（内側の余白 / 青の部分）
コンテンツ本体

2. Margin と Padding の書き方

個別指定と、複数をまとめて書くショートハンドがあります。

margin-top: 10px; /* 上 */
margin: 10px 20px 15px 5px; /* 上 右 下 左 の順 */
値の数指定の順番例
1つ全方向（上下左右）margin: 10px;
2つ上下 左右margin: 10px 20px;
3つ上 左右 下margin: 10px 20px 15px;
4つ上 右 下 左 （時計回り）margin: 10px 20px 15px 5px;

3. Border（境界線）の書き方

Borderは「太さ」「種類」「色」をまとめて指定するのが一般的です。

border: 2px solid #333; /* 実線 */
border-bottom: 3px dashed #red; /* 下側だけ破線 */

4. 現場の重要Tips：box-sizing

「widthにpaddingとborderを含める」設定をすることで、サイズの計算ミスがなくなります。

* { box-sizing: border-box; }

5. 実践：CSSで作る吹き出し

画像を使わず、border の仕組みを応用して「吹き出しの三角」を作ることができます。これは、正方形の3辺のボーダーを透明にするというテクニックを使っています。

CSSだけで作っています！

吹き出しのコード例

/* 吹き出しの本体 */
.balloon {
  position: relative;
  background: #4a90a4;
  padding: 15px;
  border-radius: 10px;
}

/* 三角部分（擬似要素） */
.balloon::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #4a90a4;
}