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

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

html css

为什么这个css/html显示额外的填充？,html,css,padding,Html,Css,Padding,在过去的几天里，我一直在努力解决我正在建设的网站上的一些奇怪的间距问题。起初，我认为这是Chrome的一个显示问题，但我已经能够在IE8、IE9、Firefox和Safari中复制这个问题。我使用老式的HTML/CSS实现向后兼容性，所以我可以说这不是IE处理HTML5或其他前沿更新虽然网上的一些解决方案让我尝试了不同的方法，包括浮动hedad，但没有什么成功&我总是在其中一个长边上填充为了重现这个问题，我已经把它剥离到了最基本的部分，并附上了一个屏幕截图，上面是我能看到的填充物。我当然会很

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

虽然网上的一些解决方案让我尝试了不同的方法，包括浮动hedad，但没有什么成功&我总是在其中一个长边上填充

为了重现这个问题，我已经把它剥离到了最基本的部分，并附上了一个屏幕截图，上面是我能看到的填充物。我当然会很感激再给我一双或七双眼睛，看看我错过了什么

编辑：这张照片上的线条高度被证明是罪魁祸首，但根据建议将图像垂直对齐到顶部，将文本保留在div的顶部。我的感觉是页眉标记将保留默认值，但页眉中的和img标记将覆盖该值。或者每个div只能有一个垂直对齐

第二，有没有办法用CSS折叠线条高度

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>

我的输出如下所示

这是bluespacer.gif；1px x 1px。仔细看，它就像一个灰尘斑点

你找错地方了。产生空白的不是填充，而是线条高度

尝试垂直对齐图像：

#header img {
  vertical-align: bottom;
}

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

您看到的位置不对。产生空白的不是填充，而是线条高度

#header img {
    display: block;
}

尝试垂直对齐图像：

#header img {
  vertical-align: bottom;
}

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

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

#header img {
    display: block;
}

#header img { line-height: 0; }

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

#header img { line-height: 0; }

因此…这就引出了另一组问题：我将编辑并重新提交。@dwwilson66我认为打开新问题比修改现有问题更好。OP要寻找的

垂直对齐值是文本底部：我在JSFIDLE中添加了一个叉：虽然没有间隔符，你可以看到img边框…和它下面的几个像素。我很想知道为什么你的底部对齐与我的不同…@cimmanon在我这边，文本底部产生的结果与…相同，因此…这会导致另一组问题：我将编辑并重新提交。@dwwilson66我想说，打开新问题比修改现有问题更好。OP要寻找的垂直对齐值是文本底部：我在JSFIDLE中添加了一个分叉：而间隔棒不在那里，你可以看到img边框…和它下面的几个像素。我想知道为什么您的底部对齐方式与我的不同…@cimmanon在我这方面，文本底部产生的结果与您可以共享bluespacer.gif链接的结果相同？垂直对齐
用于内联子元素（如图像），而不是父元素。因此，如果在div中有两个图像，那么每个图像都可以有自己的垂直对齐
值。能否共享bluespacer.gif链接？垂直对齐
用于内联子元素（如图像），而不是父元素。因此，如果在div中有两个图像，那么每个图像都可以有自己的垂直对齐
值。但随后，“测试”会在图像下方展开。安德鲁·波普：加了一个叉子，我现在在左边有了a.）填充，b.）我的背景色只有一排高。我必须在这里遗漏一些其他的东西……我可以看到多个可行的解决方案，无论出于何种原因，它们在我这方面都不起作用。@dwwilson66如果我在怪癖模式下使用IE，我会得到你提到的一些问题。你用的是什么浏览器？你在不同的浏览器中仍然会遇到问题吗？@Andrew Pope-我从Chrome/PC开始，然后转向IE8/PC。我还测试了Firefox/Mac和Safari/Mac。抖动的高度和对齐现在正在工作…所以我回到了chrome。但是，“测试”在图片下面。安德鲁·波普：加了一个叉子，我现在在左边有了a.）填充，b.）我的背景色只有一排高。我必须在这里遗漏一些其他的东西……我可以看到多个可行的解决方案，无论出于何种原因，它们在我这方面都不起作用。@dwwilson66如果我在怪癖模式下使用IE，我会得到你提到的一些问题。你用的是什么浏览器？你在不同的浏览器中仍然会遇到问题吗？@Andrew Pope-我从Chrome/PC开始，然后转向IE8/PC。我还测试了Firefox/Mac和Safari/Mac。抖动的高度和对齐现在正在工作…所以我回到chrome。