html - 图像之间的 Div 间距

Question

尊敬的论坛成员(member)

我最近又开始使用 Html，看在上帝的份上，我不知道问题出在哪里。

我创建了 3 个 Div，每个包含 1 张图像、1 组图像和 1 张图像。 (如果所有内容都在同一个 div 中，并且具有相当基本的 Css，则同样的问题)

.HeaderNav {
    margin: 0;
    padding: 0;
    overflow: auto;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
}

以及使用它的 Html。

<div class="HeaderNav">
    <img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
    <img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
    <img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
    <img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
    <img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
    <img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
    <img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
    <img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
    <img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
    <img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
    <img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
    <br/>
</div>

下图中的结果是什么，遗憾的是我不知道小空间是从哪里来的。或者为什么它不在顶部。不知何故，我真的很困惑这个问题是从哪里来的，我真的很感激你的帮助。

[2]: http://i.imgur.com/SIkB7Hs.png <-- 这个应该更清楚一点，对此感到抱歉

编辑:如果发现一个相当 face-> 墙的方法用 margin-top 修复它。并为每一行制作一个 div 类。什么可能不是最好的方法。

Answer 1

好的，这里有几件事。

首先，对于这样的问题，如果您将代码发布到 JSFiddle 中，它可以帮助人们回答很多问题，例如 this here (尽管图像不显示在那里，因为它们是相对 URL)。

此外，如果将图像向左浮动，似乎可以消除间距:

.HeaderNav img {
    float: left;
} 

请注意，我不知道为什么间距首先存在。另一个提示:您应该在 Chrome 中使用“Inspect Element”或在 Firefox 中使用 Firebug 来查看元素并查看填充、边距等。通常这会使空白的来源变得显而易见，但在这种情况下我什么也没发现。向左浮动只是一个似乎可行的想法。