如何在HTML中使用ascender/descender/normal字母进行填充？

在我们的页面上，我们在字母“f”的底部和填充在字母“p”下面的2px之间有5px。我们试图弄清楚是否padding-bottom：5px;在CSS中应该从“f”的底部或“p”的底部开始感谢您的帮助，奇怪的问题！如何在HTML中使用ascender/descender/normal字母进行填充？

来源

2011-01-14 OldDrunkenSailor

你测试了吗？ – 2011-01-14 19:30:22

只给元素一个背景颜色。然后你可以看到它将开始添加填充。我的猜测是，它也取决于你使用的字体。 – Gerben 2011-01-14 19:36:48

填充底部一般延伸到文本下方的下方，即它是额外的空间加上单独文本的内容。

它也可能有助于明确设置行高，所以像1.2这样的值。这将有助于使您的结果在浏览器中更加一致，如line-height：normal实际上不是。有关该问题的更详细讨论，请参阅line-height: abnormal。

来源

2011-01-14 19:33:02

的line-height应该帮助你 -
所有字母的高度应适合在给定的行高度 -
例如：

.test 
{ 
    font-size  : 50px; 
    line-height  : 10px; 
    padding-top  : 5px; 
    padding-bottom : 5px; 
} 

<div class="test"> 
    Hello Wquorld 
</div>

这不能适合─所以div的完整高度是line-height + padding-top + padding-bottom（20px）。文本会在顶部和底部溢出。

我做了一个quick example。我总是使用firebug工具（Firefox的扩展），它可以向您显示实时元素的填充和边距。
可以在w3.org上找到更多深入信息： 10视觉格式模型详细信息 - > 10.8 w3.org页面的线高计算。地址：w3.org/TR/CSS21/visudet.html#line-height（因垃圾邮件阻止而没有链接）

来源

2011-01-14 20:18:00

如何在HTML中使用ascender/descender/normal字母进行填充？

回答

相关问题