线高比段落大

Question

我将字体设置为200px，行高设置为200px，当我设置它时，我预期字体高度正好是200px，但它不是:(，paragraf高度为200px，但字体有223px，你能告诉我为什么吗？

HTML

<p class="par">
A<span id="why">Áj</span>gxÁj
</p>

CSS

body{font-size: 200px;font-family: Arial;line-height: 200px;}
.par{background-color: rgba(0, 255, 0, 0.5);}
#why{background-color: rgba(255, 0, 0, 0.5);}

Fiddle link

Answer 1

您的字体大小为200px，223px height为span。

您可以在inspect元素中查看。

使用F12或Ctrl+Shift+I以Chrome格式打开开发人员工具。

Answer 2

内联元素可能比字体大小更高，因为某些字形超出了边界框，并且内联元素可以换行。您可以通过提供<span>来使display: inline-block高度与字体大小相匹配。对于行高，我更喜欢使用无单位：line-height: 1