Question

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

虽然在线的一些解决方案让我尝试了不同的东西，包括漂浮的hedad，没有什么是成功的＆amp;我总是在其中一条长边上填充。

我已经把它剥离到BAREST的必需品来重现这个问题，并且已经包含了我可以看到的填充的屏幕截图。我非常感谢另一组或七只眼睛向我展示我错过的东西。

编辑：行高是这一行的罪魁祸首，但是根据建议将图像垂直对齐到顶部，文本位于div的顶部。我的感觉是header标签会保留默认值，但是标头中的img标签会覆盖它。或者我每个div只能有一个垂直对齐吗？

第二，有没有办法用CSS折叠行高？

HTML CODE

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

我的输出如下所示

screen capture

这是bluespacer.gif; 1px x 1px。仔细观察，它就像一个灰尘斑点！

（）＆lt; ---

Answer 1

你正在寻找错误的地方。它不是填充而是行高，它会产生白色空间。

尝试垂直对齐图像：

#header img {
  vertical-align: bottom;
}

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

Answer 2

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

#header img { line-height: 0; }

Answer 3

#header img {
    display: block;
}

为什么这个css / html会显示额外的填充？

3 个答案: