簡単な例。

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;