h1 に padding を指定すると行の高さが変わってしまいます

「 margin の相殺」とよばれる仕様によるものです。詳しく説明します。
2021年6月22日
ユーザー

こんにちは。少し質問させてください。

HTMLのコードで

<div class="we">
 <h1>gugugugugug</h1>
</div>

CSSで

.we{
  padding: 64px;
  border: solid blue 2px;
  background: green;
}

と打ち込みを行った際に画像のように
h1の行高さも 48px→90.875pxというように変更していました。
paddingの仕様上、文字の行高さも変更されてしまうのですか?
ご教授ください。




この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(6)