0

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

页面标题

我制作了包含元素

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

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

4

3 回答 3

1

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

有不同的方法来处理这个问题：您可以使用相对定位（将内容向上或向下移动几个像素），或vertical-align，或padding。通常padding看起来是最简单和最健壮的。但请注意，它会增加元素框的总高度。

您的padding设置将水平填充设置为 12 像素，并将垂直填充显式设置为零。您需要设置垂直边距之一，底部或顶部，具体取决于您是否希望向上或向下移动字母。在您的情况下，您可以先尝试

 padding-top: 2px;

正确的值不可避免地取决于字体。

于 2013-07-30T09:07:41.770 回答
1

您可以操纵容器和标签的line-height和vertical-align属性（尤其是行高），h1以消除行高比您想要的大的字体的“填充”效果。

http://jsfiddle.net/bYB7Q/2/为例

于 2013-07-30T09:12:50.987 回答
0

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

于 2013-07-30T01:01:44.303 回答