Question

鉴于以下HTML，<p>元素的总高度是多少？我认为这将是1em，但似乎并非如此。落在基线以下的字母似乎位于某种延伸到字体高度以下的边缘。

<html>
  <head>
    <style>
      p {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-family: serif;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum.</p>
  </body>
</html>

Answer 1

<p>标记的高度不一定与font-size相同，因为每种字体都有内置的行高。如果您需要<p>标记为特定高度，则需要使用height或line-height属性指定它。

使用line-height的另一个好处是，您可以将它与vertical-align一起使用来垂直定位文本。

CSS - <p>的高度为0填充</p>

1 个答案: