Fatal编程技术网
  • html/
  • Html CSS-高度<；p>；用0填充

Html CSS-高度<；p>；用0填充

html css fonts

Html CSS-高度<；p>；用0填充,html,css,fonts,graphic-design,Html,Css,Fonts,Graphic Design,给定以下HTML，元素的总高度是多少？我认为应该是1em，但事实并非如此。下降到基线以下的字母似乎位于延伸到字体高度以下的某种边距上 <html> <head> <style> p { margin: 0; padding: 0; font-size: 1em; font-family: serif; border: 1px solid black;

给定以下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>


p{
保证金：0；
填充：0；
字号：1em；
字体系列：衬线；
边框：1px纯黑；
}
同侧眼线


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


使用行高的另一个好处是，您可以将其与垂直对齐一起使用，以垂直定位文本。
没有属性作为
字体高度
使用
行高
我认为您需要
行高
！尝试
display:inline block
和
vertical align
而不是
baseline
对不起，我的意思是
font size
。这不正确。p元素的高度（当它处于默认的
display:block
状态时）不依赖于字体的任何“内置”填充。我很想看看你对这个问题的答案。将你的解释应用到小提琴中，它看起来像在工作。好吧，你剩下的答案是正确的。OP的例子是一个非常简单的例子。假设文本“lorem ipsum”适合一行，则只有字体大小和行高相关。在更复杂的情况下，如果有多个内联级别框，或者容器的行高与一个或多个内联级别框不同，垂直对齐设置的效果也会影响包含块容器盒的高度。