CSSのパーセント値は何に対する割合なのか

前提として、要素の幅とは、marginもborderもpaddingも含まないピクセル幅のことを指します。ただしその要素のbox-sizingがborder-boxになっていた場合は、marginは含めずborderとpaddingを含めた幅となります。

div要素やp要素などはデフォルトでdisplay: block、つまりブロック要素ですが、CSSでdisplay: inline;と指定すればインライン要素として扱われます。逆にa要素やspan要素といったインライン要素は、display: inline-block;などでブロック要素にできます。

包括ブロックとは、直近のブロック要素またはページのビューポートのことです。

<section style="position: relative;">
  <div>
    <p>この要素の包括ブロックは、直近のブロック要素つまりdiv要素</p>
    <p style="position: absolute;">この要素の包括ブロックは、positionがstaticでない直近の親つまりsection要素</p>
    <p style="position: fixed;">この要素の包括ブロックは、ページのビューポート</p>
  </div>
  <span>
    <p>この要素の包括ブロックは、直近のブロック要素つまりspanではなくsection要素</p>
  </span>
</section>
<section>
  <span style="display: inline-block;">
    <p>この要素の包括ブロックは、直近のブロック要素つまりdisplayがinline-blockとなっているspan要素</p>
  </span>
</section>

MDNの解説には、もっと詳しい情報があります。

width

包括ブロックの幅

max-widthとmin-widthも同様です。

height

• 要素自身のheightが%以外で指定されている
• 包括ブロックのheightが%以外で指定されている
• %指定だとしても、html要素(:root)までの祖先要素全てに高さが指定されている

のいずれかに当てはまるケースで、このプロパティの指定が効きます。

max-heightとmin-heightも同様です。

margin

包括ブロックの幅

margin-topとmargin-bottomも同様に、包括ブロックの幅です。

padding

包括ブロックの幅

padding-topとpadding-bottomも同様に、包括ブロックの幅です。

top, bottom

包括ブロックの高さ

right, left

包括ブロックの幅

font-size

親要素のフォントサイズに対する割合

単位emとほぼ同じで、200%は2emと同じ大きさになります。

line-height

その要素のフォントサイズに対する割合

単位emや単位なしとほぼ同じです。

参考リンク

• CSS Box Sizing Module Level 3