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

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

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

まず、パディング（padding）とは、HTMLの要素（ようそ）の中にある文字や画像と、そのボックスのふち（ボーダー）の間に作る「内側のすきま（余白）」のことです。CSSで「padding」を使うことで、見た目にゆとりを持たせたり、デザインを整えたりすることができます。

たとえば、段ボール箱に商品が入っていると想像してください。商品と箱の間にプチプチ（緩衝材）を入れますよね。このプチプチの部分が「パディング」にあたります。中身（テキストや画像）と外側の箱（ボーダー）の間のクッションがパディングです。

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などを使い分けて、心地よいデザインを作れるようになっていきましょう。