调整CSS以补偿字体添加的底部填充的最佳实践是什么？

我试图找出为什么页面标题底部看起来不均匀。

我制作了包含元素

#pageTitle {
    background-color: rgba(6, 6, 6, 0.85); 
    margin:0;
    padding: 0 12px;
    width: 100%; }

而h1

#pageTitle h1 {
    color: #93d9f5;
    font-family: 'MyriadWebPro Condensed';
    font-weight: lighter;
    margin: 0;
    text-transform:uppercase; }

---

一位同事提到，一些字体底部有额外的填充。我如何才能找到测量值，并解决它，使其看起来更均匀？

看起来您是在右侧填充12px，而不是底部填充。如果看不到其他CSS，就很难说出它为什么会这样被切断。你有固定的页面/容器高度吗？这将优先于此处。

字体没有添加任何填充（至少在CSS术语中是这样）。相反，不同的字体设计以不同的方式使用字体底部和顶部之间的空间，例如，通常在文本基线下方和大写字母高度上方留下一些底部。空间大小不必相等。例如，如果使用Verdana，则上方的空间将大于下方的空间。与MyriadWebPro相比，情况显然相反

有不同的处理方法：可以使用相对定位（将内容上下移动几个像素），或

垂直对齐

，或

填充

。通常情况下，

填充

似乎是最简单和最健壮的。但请注意，它会增加元素框的总高度

您的

填充设置将水平填充设置为12px，并将垂直填充显式设置为零。您需要设置其中一个垂直边距，底部或顶部，这取决于您希望向上还是向下移动字母。对你来说，你可以先试试

 padding-top: 2px;

正确的值不可避免地取决于字体。
您可以操纵容器和标签的
行高
和
垂直对齐
属性（尤其是行高），以消除字体的“填充”效果，该字体的行高大于您的期望值

例如，它们的底部有“padding”以容纳小写字母。页面和容器都没有设置的高度。我用萤火虫检查了一下，还是什么也没发现。Chris提出了一个很好的观点，即空间可以容纳小写字母，但现在的挑战是测量并补偿它，因为我只使用大写字母。顺便说一下，Pamela，我写的规则在左右两侧添加了填充。或者只需编辑简写：
padding:2px12px 0px你的答案确实有用，所以我投票支持你的帮助，谢谢。然而，我试图做的不是在顶部添加填充物。因为设计师的规格在顶部自动满足，但底部有额外的空间。这个空间就是我想要测量和去除的。