消除标题下的空间

Question

在this page上，标题显示在米色背景上，后面是灰色背景的部分。

我想消除标题下方的空格，使字母的底部位于两个部分相交的位置。我预计这很简单，可能只是删除一些底部填充或边距，但我无法弄清楚是什么导致这个空间出现在标题下。

Answer 1

尝试将此课程hero-h1更改为：

.hero-h1 {
    font-size: 88px;
    text-shadow: -1px -1px 0 #888888;
    line-height: 68px;
}

如果您减少行高，则可以删除

下面的空格

Answer 2

这是你的行高：

<强> CSS：

.hero-h1{
    line-height: 62px;
}

这在OS X上的Google Chrome和Firefox中看起来最佳。浏览器和操作系统可能会有所不同。此外，人们可能有不同的系统字体。考虑使用图像而不是您真的希望它在浏览器中保持一致。

另一件需要注意的事情。这是您当前的字体选择：

h1, h2, h3, h4, h5, h6{
    font-family: 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

但Arial是一种非常常见的字体。如果您不想使用图像，要获得接近像素的完美性和更高的一致性，请将其更改为：

h1, h2, h3, h4, h5, h6{
    font-family: Arial, 'Montserrat',"Helvetica Neue", "Helvetica", Helvetica, sans-serif;
}

这会使你的行高：

.hero-h1{
    line-height: 60px;
}

Answer 3

或者您可以在margin-bottom: -18px类

中添加hero-h1

Answer 4

除了关于line-height的答案之外，您还可以将.hero-h1更改为块，然后将其高度设置为与line-height匹配

.hero-h1 {
    display: inline-block;
    width: 100%;
    height: 100px;
    font-size: 88px;
    text-shadow: -1px -1px 0 #888888;
    line-height: 100px;
}

Answer 5

您可以关注this method，这样您就不必使用font-size的负余量或H1。

标题的高度设置为line-height，overflow:hidden以隐藏text-shadow溢出..

h1设置为display:inline-block和vertical-align:bottom。将margin重置为0

对于h1内的文字，您需要将line-height设置为0.7 - 0.8em，以便为j，q，y等字母留下间隙。

---

调整<调整您的header，使用header line-height和h1 font-size进行游戏。