div和img之间的空间？

15 浏览
0 Comments

div和img之间的空间？

我有这样的代码：

          
            
1. 橙子

            这里有一些文本

在"sc" div和"分隔符" img之间总是有13px的间隙。

两者的边距和填充都设置为0，null，empty，nothing。真烦人；d

我试着用firebug找出问题所在，但它们之间的空白不属于任何东西，不是边距，也不是填充，到底是怎么回事？

没有浮动，没有显示设置，也没有继承的边距或填充。

我的代码有什么问题？我一直试图在HTML中删除空白，但没有帮助（顺便说一下，如果我把分隔符放在"sc" div上面，也会有一些间隙，但更小）。

谢谢。

[添加]

CSS样式：

.分隔符 {
    边距：0;
    填充：0;
}
#sc {
    文本对齐：两端对齐;
    填充：0;
    边距：0;
    背景图像：url('images/bg.png');
    背景重复：重复-y;
    宽度：970px;
}

0

3 答案

0 Comments

在这个问题中，有人发现在一个图片和div标签之间有一个3像素的间隙，尽管所有的样式都设置为0，这真的很奇怪。

解决方法是给图片添加以下样式：img { vertical-align: middle; }。

对于我来说，这个方法非常有效。

还有人遇到了同样的问题，即使没有设置margin和padding，也有这种奇怪的间隙。这个方法解决了我的问题，谢谢！

对我来说也有效！我也遇到了相同的间隙（在图片和div之间）...太奇怪了。

这是正确的答案。虽然这是一个奇怪的问题，但这个方法可以去除底部的间隙，而不仅仅是将图片居中在可用的空间中。

这确实是正确的答案。能够提供一个解释会很好。发生了什么，为什么这样做有帮助。

0
0 Comments

问题出现的原因是图片元素作为block元素时会在它们上方/下方添加一些神奇的空间。解决方法是给.separator图片添加display: block属性。

问图片元素默认使用什么类型的display属性，如果它们不是block元素的话。回答是它们默认使用display: inline。是否所有的inline元素都会创建这种间隔呢？

0
0 Comments

问题出现的原因是

元素默认有垂直边距，所以在文本和分隔符之间存在间距。解决方法是可以在

元素上设置margin-bottom: 0;，或者在.separator上设置margin-top: -*px;，其中-*px是前一个元素的底部边距的负值。另外，也可以使用#sc p:last-child { margin-bottom: 0; }和IE9.js来让旧版的Internet Explorer支持这个效果。但是需要注意的是，文本和分隔符之间没有间距可能不符合视觉上的逻辑。解决方法是使用display: block来设置img标签，并且不能使用

标签因为设计的原因。此外，分隔符必须恰好位于这个div的下方，因为它的背景需要与顶部和底部的分隔符作为边框来呈现一个华丽的框。

0