Html div 和 img 之间的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3947113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Space between div and img?
提问by fomicz
I have code like this:
我有这样的代码：
<div id="sc">
<h1>1. Orange</h1>
<p>some text in here </p>
</div>
<img class="separator" src="images/separator.png" />
There's ALWAYS 13px gap between the "sc" div and "separator" img.
“sc” div 和“separator” img 之间总是有 13px 的差距。
Margins and paddings for both are set to 0, null, empty, nothing. Argh. I'm so mad ;d
两者的边距和填充都设置为 0、空、空、无。啊。我很生气;d
I was trying to figure out what's going on with firebug but the space between them just doesn't belong to anything, it's not a margin, not a padding, what the heck?
我试图弄清楚萤火虫发生了什么，但它们之间的空间不属于任何东西，它不是边距，不是填充，到底是什么？
No floats, no display settings, no inherited margins or paddings either.
没有浮动，没有显示设置，也没有继承的边距或填充。
What's wrong with my code? I've been trying to delete the whitespace in HTML but doesn't help (by the way if I put the separator above the "sc" div there's also some gap, but smaller).
我的代码有什么问题？我一直在尝试删除 HTML 中的空格，但没有帮助（顺便说一下，如果我将分隔符放在“sc”div 上方，也会有一些间隙，但较小）。
Thanks.
谢谢。
[ADDED]
[添加]
CSS STYLES:
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;
}
回答by Marko
Add display: block; to the .separator image.
添加显示：块；到 .separator 图像。
.separator {
margin: 0;
padding: 0;
display: block;
}
The problem is that images can sometimes add a bit of magic space up/below them, I have this issue whenever I'm working with image elements as *block*elements.
问题是图像有时会在它们的上方/下方添加一些神奇的空间，每当我将图像元素用作*block*元素时，我都会遇到这个问题。
回答by Lex Semenenko
I had a 3px gap between an image and div tag. Also all styles were set to 0. Really weird.
我在图像和 div 标签之间有 3px 的差距。此外，所有样式都设置为 0。真的很奇怪。
The fix:
修复：
img {
vertical-align: middle;
}
This worked beautifully for me.
这对我来说效果很好。
回答by unrelativity
With no screenshots to refer to I'm left in the dark on what you want, so this is all guessing.
由于没有可参考的屏幕截图，我对您想要的东西一无所知，所以这都是猜测。
I'm guessing from class="separator"that you are trying to break up your content with a horizontal line. Shouldn't you be using <hr />with appropriate styling if that's the case?
我猜测class="separator"您正试图用水平线分解您的内容。如果<hr />是这种情况，您不应该使用适当的样式吗？
In any case, note that <p>elements have vertical margins set by default.
在任何情况下，请注意<p>元素默认设置了垂直边距。
I don't see why you want the separator right up snug against your text, because it visually doesn't make sense to me.
我不明白为什么你想让分隔符紧贴你的文本，因为它在视觉上对我来说没有意义。
If you really do, there's a bunch of options:
如果你真的这样做，有很多选择：
- Set
margin-bottom: 0;on the<p> - Set
margin-top: -*px;on.separatorwhere you're assuming you're always going to have an element right before the separator with bottom margin of*px #sc p:last-child { margin-bottom: 0; }and IE9.jsfor letting older Internet Explorer versions support it
- 设置
margin-bottom: 0;在<p> - 设置
margin-top: -*px;在.separator你假设你总是在分隔符之前有一个元素的位置，底部边距为*px #sc p:last-child { margin-bottom: 0; }和IE9.js用于让较旧的 Internet Explorer 版本支持它
But I reiterate; no margin between text and a separator doesn't sound right to me.
但我重申；文本和分隔符之间没有边距对我来说听起来不合适。
回答by Jonathan Fingland
that's because there is whitespace between the tags
那是因为标签之间有空格
do:
做：
</div><img class="separator" src="images/separator.png" />
