ボックス
padding
padding は、箱の border と中身のあいだの余白（内側の余白）を決めます。背景の色は padding の部分にも塗られます。
構文
<length-percentage [0,∞]>{1,4}プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
padding: 16px 40px;
}コントロール
padding
4 辺を同じ値にする
padding-top16px
padding-right40px
padding-bottom16px
padding-left40px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
1〜4 個の長さを空白で区切って並べます。並べた数によって、どの辺に効くかが変わります。
- 1 個（
16px）：4 辺すべて。 - 2 個（
16px 40px）：上下、左右の順。 - 3 個（
8px 16px 24px）：上、左右、下の順。 - 4 個（
8px 16px 24px 32px）：上から時計回りに、上、右、下、左。
% は、上下の padding でも親の幅に対する割合になります。負の値は書けません。
1 辺だけ変えたいとき
padding-top や padding-left で 1 辺ずつ書けます。書く向きによって変わる padding-inline（行の方向）と padding-block（行が積み重なる方向）もあります。