概要へ移動

簡単な例。

CSS : paddingの例
.padding {
padding: 30px;
}
HTML : 適用するHTML
<div>
パディングなし
</div>
<div class="padding">
パディングあり
</div>
実行結果
パディングなし
パディングあり

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

px0
px1
px3
px5
px10
px15
px20
px30
引き数が0
引き数が1
引き数が2
引き数が3
引き数が4
sample
sample
padding0

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

CSS : デフォルトCSS
div {
border: 8px solid seagreen; /* 境界線 */
margin: 8px; /* 外側の余白 */
display: inline-block; /* 横並び */
vertical-align: middle; /* 上下中央揃え */
}

paddingの概要

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

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

引き数の数(最大4)により、上下左右を個別に指定ができる。

引き数が1つ

CSS : 引き数が1つ
.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 "> 引き数が0 </div>
<div class="padding-1 "> 引き数が1 </div>
<div class="padding-2 "> 引き数が2 </div>
<div class="padding-3 "> 引き数が3 </div>
<div class="padding-4 "> 引き数が4 </div>
実行結果
引き数が0
引き数が1
引き数が2
引き数が3
引き数が4
引き数の数第一引き数第二引き数第三引き数第四引き数
1上下左右---
2上下左右--
3左右-
4

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

padding0を上書きする。単位は不要。

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;