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

hol*_*eap 3 html css fonts graphic-design

给定以下 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>
Run Code Online (Sandbox Code Playgroud)

Ete*_*our 5

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

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