0

在过去的几天里，我一直在为我正在构建的网站上的一些奇怪的间距而苦苦挣扎。最初，我认为这是 Chrome 的显示问题，但我已经能够在 IE8、IE9、Firefox 和 Safari 中复制该问题。我使用老式的 HTML/CSS 来实现向后兼容性，所以我可以说这不是 IE 处理 HTML5 或其他一些前沿更新。

虽然网上的一些解决方案让我尝试了不同的事情，包括浮动头部，但没有任何成功，而且我总是在其中一个长边上填充。

我已将其简化为重现问题的基本要素，并包含了我可以在最后看到的填充的屏幕截图。我当然会欣赏另一组或七只眼睛向我展示我错过的东西。

编辑：行高是这个问题的罪魁祸首，但是根据建议将图像垂直对齐到顶部，将文本留在了 div 的顶部。我的感觉是标题标签将保留默认值，但标题中的 the 和 img 标签将覆盖它。还是每个 div 只能有一个垂直对齐？

其次，有没有办法用 CSS 折叠 line-height？

代码

<html>  
        <head>
             <title>Test</title>
             <LINK rel="stylesheet" href="test.css">
        </head>
        <body>
             <div id="header">
             <img src="bluespacer.gif" height=125 width=400>
             TEST
             </div>
        </body>
    </html>

CSS 代码 

#header {
        font: serif;
        color: blue;
        background-color: gray;
    }

我的输出如下所示

屏幕截图

这是 bluespacer.gif；1 像素 x 1 像素。仔细看，就像尘埃一样！

( bluespacer.gif) <---

4

3 回答 3

5

你看错地方了。产生空白的不是填充而是行高。

尝试垂直对齐图像：

#header img {
  vertical-align: bottom;
}

说明：在默认样式中，图像放置在文本的基线上。也就是说，下边缘大致与字母“x”的下边缘对齐。但是因为文本有下降（如'g'或'j'），周围的框被绘制得更高，这导致图像下方有额外的空间。

于 2012-12-18T12:59:28.623 回答
1

这是一个奇怪的问题。你可以这样做。

#header img { line-height: 0; }
于 2012-12-18T14:38:22.623 回答
0 
#header img {
    display: block;
}
于 2012-12-18T13:06:39.460 回答