Html 图像之间的Div间距

亲爱的各位论坛成员：

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

我创建了3个Div，每个Div有1个图像，1组图像，然后再创建一个图像。（如果所有人都在同一个div中，并且具有相当基本的Css，则会出现相同的问题）

以及使用它的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] ：用墙的方式将其固定在边缘顶部。为everyline制作一个div类。什么可能不是最好的方法。

可能是因为您的

仍被声明为内联级元素。使用：

.HeaderNav img {
    display: block;
}

此外，还应检查是否已为图像元素指定了边距或填充。如果需要，请重置它们。

好的，这里有几件事

首先，对于这样的问题，如果您在JSFiddle中发布代码，它会帮助人们回答很多问题，比如（尽管图像不会显示在那里，因为它们是相对的url）

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

.HeaderNav img {
    float: left;
} 

---

我只是想指出，我不知道为什么空间会首先存在。另一个提示：你应该使用Chrome中的“Inspect元素”或Firefox中的Firebug来查看元素，并查看填充、边距等。通常这会使空白的来源变得很明显，尽管在本例中我什么也没发现。向左浮动似乎是一个可行的想法。

另外，确保html和正文的填充和边距为0

那么，试试这个：

    body, html {

         margin: 0;
         padding: 0;
    }

---

HTML不能单独使用；它必须让CSS不断地使用它。

有点令人困惑的问题，我不完全理解。但是检查一下这个。这就是你的意思吗

还要从第一个图像中删除HeaderNav类

<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>

---

由于字体大小，img元素的默认显示类型类似内联块，因此img元素可能有3px的空间

要解决此问题，可以使用以下代码：

.HeaderNav img {
    display: block;
}

或

---

它们都会改变img元素的显示类型，我推荐第一种。

我看不到任何小空间o.0这只是我吗？好的，我会尝试使用css的宽度和高度。但这不是要求每个图像都有一个新类吗？2.好的，很抱歉，我甚至不知道这个站点：P ill thry the img float.HeaderNav img{float:left；}修复了这个问题，如果我现在知道原因的话。因为我讨厌那些本身没有多大意义的行为。@darkminaz是的，我同意不知道很烦人。至于CSS，如果您创建一个规则，将所有图像的高度设置为55px（

.HeaderNav img{height:55px；}

），它将自动设置宽度以保持图像的比率不变。如果您想要不同的宽度，您可以在图像上使用内联CSS-

style=“width:Xpx；”

而不是

width=“X”

问题是我得到的大小从12px到500px不等。所以我必须为每个图像创建一个。但我稍后会试试。也许这只是我的一个坏习惯，我也会喜欢这种方式。可悲的是，据我所知，这并没有改变什么。但感谢您的快速帮助。显示：block确实增加了更多的间距，并将每个图像推到了自己的行上。但无论如何，还是要谢谢你，以后可能会需要它。感谢你深入了解为什么图像默认有一个空格，这可以解释为什么它会这样。没关系，但我真的建议使用显示块而不是左浮动。

.HeaderNav img {
    display: block;
}

.HeaderNav img {
    float: left;
}