CSS | padding | 内側の余白

padding(パディング)はボックスの内側の余白を指定するためのCSSプロパティです。 padding-top、padding-bottom、padding-left、padding-rightについても解説します。

内側の余白にはpadding、外側の余白にはmarginを使います。

余白	内側	外側
全辺	`padding`	`margin`
上辺	`padding-top`	`margin-top`
下辺	`padding-bottom`	`margin-bottom`
左辺	`padding-left`	`margin-left`
右辺	`padding-right`	`margin-right`

`padding`

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

実行結果初期状態

sample

.sampleクラスにpaddingプロパティを設定すると内側に余白ができます。 10px、20px、30pxの例を示します。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 10px;
}

実行結果10px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 20px;
}

実行結果20px

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 30px;
}

実行結果30px

sample

paddingのデフォルト値は0です。

複数の設定値

上下左右で異なるpaddingを設定するに複数の値を指定できます。

`padding`プロパティ
設定値の数	1番目	2番目	3番目	4番目
1	上下左右	-	-	-
2	上下	左右	-	-
3	上	左右	下	-
4	上	右	下	左

複数の設定値の例。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 10px;
}

実行結果1つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 10px 20px;
}

実行結果2つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 10px 20px 30px;
}

実行結果3つ

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding: 10px 20px 30px 40px;
}

実行結果4つ

sample

`padding-top`

padding-topで上辺のpaddingを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding:     1rem;
    padding-top: 4rem;
}

実行結果上辺

sample

`padding-bottom`

padding-bottomで下辺のpaddingを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding:        1rem;
    padding-bottom: 4rem;
}

実行結果下辺

sample

`padding-left`

padding-leftで左辺のpaddingを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding:      1rem;
    padding-left: 4rem;
}

実行結果左辺

sample

`padding-right`

padding-rightで右辺のpaddingを指定できます。

HTML


<div class="sample">sample</div>

CSS


.sample {
    border: 3px solid blue;  /* 境界線 */
    display: inline-block;   /* インライン・ブロック要素 */
    font-size: 2rem;         /* 文字の大きさ */
}

CSS


.sample {
    padding:       1rem;
    padding-right: 4rem;
}

実行結果右辺

sample