余白には、marginとpaddingの２種類があります。
paddingは、単純に内側の余白と捉えると、予想外の表示に戸惑うことになります。
ボックス構造
HTMLの要素の外観は、ボックススタイルというHTMLの要素(content)のブロックをそのまたブロックの箱で順に囲んでいくという構造で作られています。
margin
border
padding
content ↑
height
← width ↓ →
padding
パディング領域
コンテンツ領域とパディングを含めたエリアで要素の内側の余白となります。背景色等の設定はこの領域まで効果を及ぼします。
inline要素での表示乱れ
inline要素では、左右にしか効果がなく、上下方向に設定したpadding量は、line boxの上下にはみ出しますが、line boxの高さを変えることはできないので、意図したデザインにならないことがあります。
装飾した部分が広がり、高さと連動していないため、被った部分によって他の部分が隠れたり、予定した操作（クリック）がその部分は利かないことが起こります。
高さ方向にも装飾を反映させたい場合には、 display: inline-block; の指定、または、 line-height で行の高さを調整しておく必要があります。
パディングの設定
パディング領域の設定は、paddingプロパティで行います。
padding: 値;
<div class="padding">パディング領域</div>
.padding {
display: inline-block;
padding: 0.5rem; /* 上下左右に設定 */
}
パディング領域
.padding {
display: inline-block;
padding: 0.5rem 1.5rem; /* 上下と左右に設定 */
}
.padding {
display: inline-block;
margin: 0.5rem 1.5rem 0.75rem; /* 上、左右、下に値を設定 */
}
.padding {
display: inline-block;
margin: 0.5rem 1.5rem 0.75rem 1rem; /* 上、右、下、左に値を設定 */
}
パディング領域
個別指定のプロパティ
各辺個別に設定するプロパティもあります。
上：
padding-top: 値;
右：
padding-right: 値;
下：
padding-bottom: 値;
左：
padding-left: 値;
指定する値について
設定値は、長さです。単位をつけて指定します。単位がないと反映しません。
複数の値を設定する場合は、半角のスペースを入れて区切ります。
マイナス値は設定できません。