css - 调整 CSS 以补偿字体添加的底部填充的最佳做法是什么？

Question

我想弄清楚为什么页面标题在底部看起来不均匀。

我制作了包含元素

#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; }

一位同事提到一些字体在底部包含额外的填充。我怎样才能找到该测量值，并解决它以使其看起来均匀？

Answer 1

您可以操纵容器的 line-height 和 vertical-align 属性(特别是 line-height)和 h1 标签来消除行高大于您期望的字体的“填充”效果。

http://jsfiddle.net/bYB7Q/2/举个例子