概要へ移動

簡単な例。

CSS : paddingの例
.padding  {

    padding:  30px;

}
HTML : 適用するHTML
<div>

    パディングなし

</div>



<div class="padding">

    パディングあり

</div>
実行結果
パディングなし
パディングあり

このページで解説するコードの実行結果。

引き数が１つ
px0
px1
px3
px5
px10
px15
px20
px30
引き数が複数
引き数が０
引き数が１
引き数が２
引き数が３
引き数が４
パディングを消す
sample
sample
padding0

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {

    border:             8px solid seagreen; /*  境界線  */

    margin:             8px;                /*  外側の余白  */

    display:            inline-block;       /*  横並び  */

    vertical-align:     middle;             /*  上下中央揃え  */

}

paddingの概要

「内側の余白（パディング）」を指定する。

paddingプロパティには、内側の幅を数値（＋ 単位）で指定する。 デフォルト値は「0」。

引き数の数（最大４）により、上下左右を個別に指定ができる。

引き数が１つ

CSS : 引き数が１つ
.px0  {    padding:  0;      }

.px1  {    padding:  1px;    }

.px3  {    padding:  3px;    }

.px5  {    padding:  5px;    }

.px10 {    padding:  10px;   }

.px15 {    padding:  15px;   }

.px20 {    padding:  20px;   }

.px30 {    padding:  30px;   }
HTML : 適用するHTML
<div class="px0">  px0  </div>

<div class="px1">  px1  </div>

<div class="px3">  px3  </div>

<div class="px5">  px5  </div>

<div class="px10"> px10 </div>

<div class="px15"> px15 </div>

<div class="px20"> px20 </div>

<div class="px30"> px30 </div>
実行結果
px0
px1
px3
px5
px10
px15
px20
px30

引き数が複数

CSS : 引き数が複数
.padding-0 {    padding:  ;                    }

.padding-1 {    padding:  5px;                    }

.padding-2 {    padding:  5px 30px;               }

.padding-3 {    padding:  5px 30px 20px;          }

.padding-4 {    padding:  5px 30px 20px 50px;     }
HTML : 適用するHTML
<div class="padding-0 ">  引き数が０  </div>

<div class="padding-1 ">  引き数が１  </div>

<div class="padding-2 ">  引き数が２  </div>

<div class="padding-3 ">  引き数が３  </div>

<div class="padding-4 ">  引き数が４  </div>
実行結果
引き数が０
引き数が１
引き数が２
引き数が３
引き数が４
引き数の数第一引き数第二引き数第三引き数第四引き数
1上下左右---
2上下左右--
3上左右下-
4上右下左

パディングを消したい場合

paddingに0を上書きする。単位は不要。

CSS : パディングを消す
.sample {    

    padding:  30px;                    

}



.padding0 {

    padding:  0;                    

}
HTML : 適用するHTML
<div class="sample">

    sample

</div>



<div class="sample padding0">

    sample <br> padding0

</div>
実行結果
sample
sample
padding0

Emmet : p

記述Visual Studio Code
ppadding: ;
p5padding: 5px;
p:apadding: auto;