先生と生徒の会話形式で理解しよう

生徒

「先生、CSSのパディングってよく聞くんですけど、どんなときに使うんですか？」

先生

「パディングは、ボックスの中の文字や画像と、外側の境界線（ボーダー）の間にできる“内側の余白”のことですよ。」

生徒

「外側の余白はマージンですよね？じゃあ、パディングは内側なんですね！」

先生

「その通りです！今日は、CSSのパディングを使ってコンテンツの内側に余白を作る方法を、実際のサンプルを交えて丁寧に学んでいきましょう。」

1. パディングとは？CSSで内側の余白を作るしくみ

CSSのパディング（padding）とは、HTML要素の「境界線（ボーダー）」とその中にある「コンテンツ（文字や画像）」の間に作られる内側の余白のことです。Webデザインにおいて、文字が枠線にぴったりくっついていると窮屈で読みづらくなりますが、適切なパディングを設定することで、清潔感のある見やすいレイアウトになります。

イメージしやすい例えとして、「額縁に入った絵」を想像してみてください。絵（コンテンツ）と額縁（ボーダー）の間には少し隙間（マット）がありますよね。あの隙間がパディングです。また、段ボール箱の中に商品を入れる際、傷つかないように入れる緩衝材（プチプチ）も、中身と箱の距離を保つパディングの役割と同じです。

まずは、パディングがある場合とない場合で、どれくらい見た目の印象が変わるのか、初心者の方にもわかりやすいシンプルな比較サンプルを見てみましょう。


<style>
    /* パディングがないボックス */
    .no-padding {
        background-color: #fce4ec;
        border: 2px solid #ad1457;
        margin-bottom: 20px;
    }

    /* パディングがあるボックス */
    .has-padding {
        background-color: #e8f5e9;
        border: 2px solid #2e7d32;
        padding: 20px; /* ここで内側の余白を指定！ */
    }
</style>

<div class="no-padding">
    パディングなし：文字が枠線にピタッとくっついていて、少し苦しそうな印象ですね。
</div>

<div class="has-padding">
    パディングあり（20px）：文字の周りにゆとりが生まれ、圧倒的に読みやすくなりました！
</div>

ブラウザ表示

いかがでしょうか？「padding: 20px;」という、たった一行のコードを追加するだけで、プロっぽい整ったデザインに近づきます。このように、要素の内側の空間をコントロールするのがパディングの大きな役割です。この基本をマスターすることで、ボタンのデザインや文章の読みやすさを自由自在に調整できるようになります。

2. CSSでパディングを設定する基本の書き方

CSSでは、次のように「paddingプロパティ」を使って、要素に内側の余白を指定します。単位には「px（ピクセル）」や「em」「%」などを使うことができます。最初はpxがわかりやすいでしょう。


<style>
.box {
    background-color: #e0f7fa;
    padding: 20px;
    border: 2px solid #00796b;
}
</style>

<div class="box">このボックスの内側には20pxのパディングがあります。</div>

ブラウザ表示

この例では、ボックス全体の内側に「20ピクセル」の余白を作っています。パディングがないと、文字がボーダーぎりぎりまで詰まって見にくくなりますが、パディングをつけることで読みやすくなります。

3. 上下左右を個別に設定するpadding-top / padding-right / padding-bottom / padding-left

パディングは、上下左右それぞれに別の値を設定することもできます。たとえば、上だけ余白を広くしたいときは「padding-top」を使います。


<style>
.card-sample {
    background-color: #fff3e0;
    border: 2px solid #ff9800;
    padding-top: 40px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}
</style>

<div class="card-sample">上に40pxの余白、下に20pxの余白があります。</div>

ブラウザ表示

このように4方向を個別に指定することで、デザインの細かい調整ができます。たとえばタイトルの下だけ少しスペースを空けたいときなどにも便利です。

4. paddingのショートハンド（省略記法）を使ってすっきり書く

CSSのpaddingは、短くまとめて書くこともできます。値を「1つ〜4つ」まで指定することができ、それぞれの順番に意味があります。

1つ：上下左右すべてに同じ余白
2つ：上と下／右と左のペアで設定
3つ：上／左右／下の順
4つ：上／右／下／左の順


<style>
.padding-sample1 {
    padding: 20px;
}

.padding-sample2 {
    padding: 10px 30px;
}

.padding-sample3 {
    padding: 10px 20px 30px;
}

.padding-sample4 {
    padding: 10px 20px 30px 40px;
}
</style>

<div class="padding-sample1">全方向20px</div>
<div class="padding-sample2">上下10px・左右30px</div>
<div class="padding-sample3">上10px・左右20px・下30px</div>
<div class="padding-sample4">上10px・右20px・下30px・左40px</div>

ブラウザ表示

省略記法を使うとコードがすっきりします。たとえば「padding: 10px 20px;」なら、上下10px、左右20pxという意味になります。CSSコーディングでは、この書き方を覚えておくと便利です。

5. パディングと背景色・ボーダーの関係

パディングは、背景色（background-color）にも影響します。背景色はパディングの部分まで広がりますが、マージン（外側の余白）には広がりません。実際に比較してみましょう。


<style>
.padding-example {
    background-color: #bbdefb;
    padding: 30px;
    border: 2px solid #0d47a1;
}

.margin-example {
    background-color: #bbdefb;
    margin: 30px;
    border: 2px solid #0d47a1;
}
</style>

<div class="padding-example">これはpaddingを使っています。</div>
<div class="margin-example">これはmarginを使っています。</div>

ブラウザ表示

このように、パディングを使うと背景色が内側の余白まで広がるのがわかります。ボーダーとテキストの間の空間をとりつつ、デザインの一体感を出すことができます。

6. パディングを使うときの注意点

パディングを設定すると、要素全体のサイズが大きくなる点に注意が必要です。これは「ボックスモデル」と呼ばれる仕組みの一部です。たとえば幅を300pxにしてpaddingを20pxつけると、実際には左右の20pxずつが足されて、全体の幅は340pxになります。

この動きを避けたい場合は、CSSで「box-sizing: border-box;」という指定をすると、パディングを含めても幅が変わらないようにできます。


<style>
.box-sizing-example {
    width: 300px;
    padding: 20px;
    border: 2px solid #388e3c;
    box-sizing: border-box;
}
</style>

<div class="box-sizing-example">box-sizingをborder-boxにすると、幅が一定のままです。</div>

ブラウザ表示

このように、「padding」を使うときは見た目だけでなく、全体のサイズ計算にも気をつける必要があります。特にWebデザインでレイアウトを組むときにはとても大切な考え方です。

7. まとめ：パディングを使いこなして見やすいデザインにしよう

パディングは、テキストや画像を読みやすく見せたり、ボックス内のレイアウトを整えたりするのに欠かせないCSSプロパティです。最初は単に「内側の余白」と覚えておくだけでも大丈夫です。少しずつpadding-topやpadding-leftなどを使い分けて、心地よいデザインを作れるようになっていきましょう。