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

【问题标题】：Why does this css/html display extra padding?为什么这个 css/html 显示额外的填充？
【发布时间】：2012-12-18 12:57:56
【问题描述】：

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

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

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

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

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

HTML 代码

<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 链接吗？
vertical-align 用于内联子元素（例如您的图像），而不是父元素。因此，如果您的 div 中有 2 张图片，则每张图片都可以有自己的 vertical-align 值。 css-tricks.com/what-is-vertical-align

标签： html css padding

【解决方案1】：

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

尝试垂直对齐图像：

#header img {
  vertical-align: bottom;
}

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

【讨论】：

原来如此……这又引出了另一组问题：我将编辑并重新提交。
@dwwilson66 我会说打开新问题比修改现有问题更好。
OP 正在寻找的 vertical-align 值是 text-bottom: jsfiddle.net/RTTjc/1
我在您的 JSFiddle 中添加了一个叉子：jsfiddle.net/dwwilson66/WuBH8，虽然没有分隔符，但您可以看到 img 边框......以及它下面的几个像素。我很想知道为什么你的底部对齐行为与我的不同......
@cimmanon 在我这边，text-bottom 产生的结果与jsfiddle.net/dwwilson66/W4Hgb

【解决方案2】：

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

#header img { line-height: 0; }

【讨论】：

【解决方案3】：

#header img {
    display: block;
}

【讨论】：

但是，“TEST”在图像下方换行。我读了这个问题，那不是故意的。
@Andrew Pope：添加了一个叉子，jsfiddle.net/dwwilson66/W4Hgb，我现在有 a.) 左边的填充，b.) 我的背景颜色只有一行高。我必须在这里遗漏一些其他东西......我可以看到多种可行的解决方案，无论出于何种原因，这些解决方案对我都不起作用。
@dwwilson66 如果我在怪癖模式下使用 IE，我会遇到您提到的一些问题。你使用的是什么浏览器？在不同的浏览器中你是否仍然遇到问题？
@Andrew Pope - 我从 Chrome/PC 开始，然后转到 IE8/PC。我还在 Firefox/Mac 和 Safari/Mac 中进行了测试。摇晃的高度和对齐方式现在正在工作......所以我回到了 chrome。