Question

在我们的页面上，我们在字母“f”的底部和字母“p”下面的2px填充之间有5px。我们试图找出padding-bottom：5px;在CSS中应该从“f”的底部或“p”的底部开始

感谢您的帮助，奇怪的问题！

Answer 1

填充底部通常延伸到文本的下降部分之下，即它的附加空间加上仅文本的内容。

显式设置行高也可能有帮助，因此值为1.2。这将有助于使您的结果在浏览器中更加一致，因为行高：正常实际上并非如此。有关该问题的详细讨论，请参阅line-height: abnormal。

Answer 2

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

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

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

这不适合 - 所以div的完整高度是行高+填充顶部+填充底部（20px）。文本会在顶部和底部溢出。

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

如何在HTML中完成ascender / descender /普通字母的填充？

2 个答案: