CSS - 的高度，0 填充

【问题标题】：CSS - Height of with 0 paddingCSS - 的高度，0 填充
【发布时间】：2014-11-30 08:30:09
【问题描述】：

给定以下 HTML， 元素的总高度是多少？我认为这将是 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>

【问题讨论】：

没有属性作为font-height使用line-height
我觉得你需要line-height！
尝试display:inline-block 和vertical-align 而非baseline liebdich.biz/inlineblockincss
对不起，我的意思是font-size。

标签： html css fonts graphic-design

【解决方案1】：

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

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

【讨论】：

这是不正确的。 p 元素的高度（当它处于默认display:block 状态时）不依赖于字体的任何“内置”填充。
我很想看看你对这个问题的回答。
在小提琴中应用了你的解释，它看起来像工作.. Fiddle.
嗯，你的答案的其余部分是正确的。 OP的示例是一个非常简单的案例。假设文本“lorem ipsum”适合单行，只有字体大小和行高是相关的。
在更复杂的情况下，有多个行内层框，或者容器的行高与一个或多个行内层框不同时，垂直对齐设置也会影响包含块容器框的高度。