フレームモデル：CSS 内余白

要素の内余白は、枠と内容エリアの間にあります。このエリアを制御する最も簡単な属性は padding 属性です。

CSS padding 属性は、要素の枠と要素の内容間の空白領域を定義します。

CSS padding 属性

CSS padding 属性は、要素の内余白を定義します。padding 属性は長さ値や百分比值を受け入れますが、負値を使用することはできません。

例えば、すべてのh1要素の各辺に10ピクセルの内余白を設定したい場合、以下のようにします：

h1 {padding: 10px;}

上、右、下、左の順序でそれぞれの内余白を設定することもできます。各辺は異なる単位や百分比值を使用できます：

h1 {padding: 10px 0.25em 2ex 20%;}

以下の4つの単独の属性を使用して、上、右、下、左の内余白をそれぞれ設定します：

お分かりでしょうが、以下のルールは上記のショートカットルールと完全に同じ効果を生み出します：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

前述の通り、要素の内余白に百分比值を設定できます。百分比值は親要素のwidthに対して計算され、外余白と同様です。したがって、親要素のwidthが変更されると、それらも変更されます。

以下のルールは、段落の内余白を親要素のwidthの10%に設定します：

p {padding: 10%;}

例えば、段落の親要素がdiv要素の場合、内余白はdivのwidthに基づいて計算されます。

<div style="width: 200px;">
<p>この段落は幅が200ピクセルのDIV内に含まれています。</p>
</div>

注意：上下内余白は左右内余白と一致します；つまり、上下内余白の百分比值は親要素の幅に対して設定され、高さに対して設定されません。

属性	説明
padding	ショートカット属性。1つの宣言で要素のすべての内余白属性を設定するために使用されます。
padding-bottom	要素の下内余白を設定します。
padding-left	要素の左内余白を設定します。
padding-right	要素の右内余白を設定します。
padding-top	要素の上内余白を設定します。