vertical-align: bottom; を設定すると、行ボックスの高さが変わるのはなぜですか?

画像が行ボックスの下端に配置され、ずれた分 p の高さが小さくなったからです。
2022年10月13日
ユーザー

質問なのですが、 vertical-align: bottom; を設定すると行ボックスの高さは変わるのでしょうか?

先生の説明で

baseline からの距離ではなくて、行ボックスの下端に配置するという意味になる

というのは確認できたのですが、そうすると指定する前と比べて画像のように行の高さが違ってしまいました。これはどこかソースに間違いがあるということですか。

HTML

<p>
  <img src="img/logo.png" width="128" height="128">
  <img src="img/taro.png" width="120" height="90">
</p>

CSS

body {
  margin: 0;
}
p {
  background-color: pink;
}

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?