CSS标题元素之间出现意外差距

Question

我目前正在重新设计一个网站，但是在标题中遇到了一些问题。标题包含徽标，一些文本和导航栏。在徽标底部和导航栏顶部之间有一个相对较大的间隙，如此屏幕截图所示：

我不想要这个差距，我不知道它来自哪里，我不知道如何摆脱它：（

我可以通过将包含徽标的div的line-height属性设置为0.0来将其缩小为单个像素，但它看起来很糟糕，但仍无法解决问题。

如果有更多HTML / CSS经验的人可以识别我所犯的任何愚蠢错误，可以在线查看正在进行中的版本here。

Answer 1

该空间来自下行程序，允许y和g字符完全适合垂直。 display:block;或vertical-align:bottom;应该同样有效。

Answer 2

添加以下css类

.logo img
{
vertical-align:bottom;
}

Answer 3

img { display: block; }

存在差距，因为默认情况下图像是在文本基线处对齐的内联元素。如果您在同一行中包含带有下行符的文本，那么这就是descenders的位置。

Answer 4

看起来你正在从<div class="logo">和<a href="#">包裹你的徽标获得一些间距。您可以使用上面提到的display:block;或vertical-align:bottom;来解决此问题。

---

建议：如果您目前没有使用它，可能需要查看为Firefox安装Firebug插件。它是检查页面的绝佳工具。您可以突出显示特定区域，Firebug将显示哪些HTML元素和CSS类负责布局。

Answer 5

包含该元素的<a>应为display:block; position:relative，图片应为position:absolute。在这里工作。