Webサイトを作っていて、「文字が枠線にピタッとくっついて窮屈に見える」「ボタンをもっとふっくらさせたい」と思ったことはありませんか？その悩み、すべて**CSSの「余白」**で解決できます。
ボックスモデルの構造を知る
HTMLのすべての要素（見出し、段落、画像など）は、実は**「四角い箱（ボックス）」**に入っています。この箱の構造を理解することが、余白マスターへの第一歩です。
[Image showing the CSS box model: Content in the center, surrounded by Padding, then Border, then Margin on the outside]
余白の2大勢力
- Padding（パディング）：
- 内側の余白。
- 枠線（ボーダー）から文字・画像までの距離。
- 背景色をつけると、パディングの部分まで色が塗られます。
- Margin（マージン）：
- 外側の余白。
- 他の要素（隣の箱）との距離。
- 背景色はつきません。常に透明な「境界線」です。
💡 例えで覚えよう！
- パディング：厚着をして自分の体を大きく見せる（自分の肉厚）。
- マージン：他人に近づきすぎないように距離をとる（パーソナルスペース）。
PaddingとMarginの書き方（基本〜応用）
基本の4方位
個別に指定する場合は、ハイフンでつなぎます。
CSS
.box {
padding-top: 10px; /* 上 */
padding-right: 20px; /* 右 */
padding-bottom: 10px; /* 下 */
padding-left: 20px; /* 左 */
}
爆速で書く「ショートハンド」
実務では、1行でまとめて書くのが一般的です。**「上から時計回り」**と覚えましょう。
- 4つ指定：
padding: 10px 20px 30px 40px;（上 右 下 左） - 3つ指定：
padding: 10px 20px 30px;（上 左右 下） - 2つ指定：
padding: 10px 20px;（上下 左右）← 超重要！一番使います - 1つ指定：
padding: 10px;（上下左右すべて同じ）
実践で役立つ「余白のテクニック」
① ボタンをふっくらさせる（Padding）
文字だけのリンクを、クリックしやすいボタンに変えます。
CSS
.button {
background-color: #007bff;
color: white;
padding: 10px 30px; /* 上下に10px、左右に30pxの厚みを持たせる */
border-radius: 5px;
text-decoration: none;
}
② 要素を真ん中に寄せる（Margin auto）
「箱」そのものを画面の中央に配置する魔法の言葉です。
CSS
.container {
width: 80%; /* 幅を決めるのが必須条件 */
margin: 0 auto; /* 上下0、左右を自動（auto）で均等にする */
}
初心者がハマる「2つの落とし穴」
その1：マージンの相殺（そうさい）
上下に並んだ要素にマージンを設定したとき、「マージンの足し算」にはならないというルールがあります。
- 上の箱に
margin-bottom: 30px; - 下の箱に
margin-top: 20px; - 結果：隙間は50pxではなく、大きい方の 30px になります。
その2：幅（width）とパディングの関係
width: 300px; の箱に padding: 20px; をつけると、箱の合計サイズは 340px（300 + 左右20ずつ）に膨らんでしまいます。 これを防ぐために、CSSの冒頭に以下の1行を入れるのがプロの鉄則です。
CSS
* {
box-sizing: border-box; /* パディングを含めてwidthのサイズに収める設定 */
}
検証ツールで「余白」をのぞき見する
前回の記事で学んだ「検証ツール」がここでも大活躍します！
- 検証ツールを開き、要素を選択。
- 右側のStylesタブの下にあるボックスモデルの図を見る。
- オレンジ色がマージン、緑色がパディングです。
- 「なぜか隙間が空きすぎている」と思ったら、ここを見てオレンジ色（マージン）が犯人じゃないか確認しましょう。
今回の備忘録まとめ
- padding：内側のふくらみ。背景色がつく。
- margin：外側の距離。背景色はつかない。
- 書き方：
margin: 上下 左右;をまずはマスターする。 - 迷ったら：検証ツールで「緑（Pad）」か「橙（Mar）」かを確認！
これで、あなたはWebサイトの「空気感（スペース）」を自由にコントロールできるようになりました！
コメント