CSSでパディングを使ってコンテンツの内側に余白をつける方法！初心者でもわかるPaddingの基本

1. パディングとは？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でパディングを設定する基本の書き方

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

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のショートハンド（省略記法）を使ってすっきり書く

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. パディングと背景色・ボーダーの関係

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. パディングを使うときの注意点

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. まとめ：パディングを使いこなして見やすいデザインにしよう

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

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