Question

我有这样的代码：

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" />

“sc”div和“separator”img之间总共有13px的差距。

两者的边距和填充都设置为0，null，为空，没有。哎呀。我很生气; d

我试图弄清楚萤火虫发生了什么，但它们之间的空间不属于任何东西，它不是边缘，不是填充物，到底是什么？

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

我的代码出了什么问题？我一直试图删除HTML中的空格但没有帮助（顺便说一句，如果我把分隔符放在“sc”div之上，那么也有一些差距，但是更小）。

感谢。

[ADDED]

CSS样式：

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;
}

Answer 1

添加display：block;到.separator图片。

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

问题是图像有时会在其上方/下方添加一些魔法空间，每当我将图像元素用作*block*元素时，我都会遇到此问题。

Answer 2

我在图像和div标签之间有3px的间隙。所有样式都设置为0.真的很奇怪。

修复：

img {
   vertical-align: middle;
}

这对我很有效。

Answer 3

没有截图可以参考我在黑暗中留下你想要的东西，所以这都是猜测。

我猜测class="separator"你试图用水平线分解你的内容。如果是这种情况，你不应该使用具有适当样式的<hr />吗？

在任何情况下，请注意<p>元素默认设置了垂直边距。

我不明白你为什么要让分隔符紧贴你的文字，因为它在视觉上对我没有意义。

如果你真的这么做，那就有很多选择：

在margin-bottom: 0;

<p>

在margin-top: -*px;上设置.separator，您假设您总是在分隔符前面有一个元素，其下边距为*px
#sc p:last-child { margin-bottom: 0; }和IE9.js用于让旧的Internet Explorer版本支持

但我重申一下;文本和分隔符之间没有边距对我不合适。

Answer 4

那是因为标签之间有空格

做的：

</div><img class="separator" src="images/separator.png" />

div和img之间的空间？

4 个答案: