CSSにおける継承とem単位

次に、より深いネスト構造がある場合を考えてみましょう：

html<main>
  <div>
    <p>
      text
    </p>
  </div>
</main>

mainタグに以下のフォントサイズが設定されているとします：

cssmain {
  font-size: 10px;
}

divタグのフォントサイズをem単位で設定します：

cssdiv {
  font-size: 2em; /* 20pxに相当 */
}

段落のフォントサイズもem単位で設定します。 この場合、段落のサイズは既に計算されたdivのフォントサイズを基準として計算されます：

cssp {
  font-size: 2em; /* 40pxに相当 */
}

実践問題

以下のHTMLコードを使用して問題を解いていきます：

html<section>
  <div>
    <p>
      text
    </p>
  </div>
</section>

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}
p {
  font-size: 1.5em;
}

csssection {
  font-size: 40px;
}
div {
  font-size: 0.5em;
}
p {
  font-size: 0.5em;
}