Question

亲爱的这个神奇论坛的成员

我最近又开始使用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>

下图中的结果是什么，遗憾的是我没有得到小空间的位置。或者为什么它也不在最重要的位置。不知怎的，我真的很困惑这个问题来自哪里，我真的很感激帮助。

enter image description here

[2]：http://i.imgur.com/SIkB7Hs.png＆lt; - 这个人应该对此更加明确抱歉

编辑：如果找到了相当的面孔 - ＆gt;用margin-top修复它的方法。而且只为每一行制作一个div类。什么可能不是最好的方式。

Answer 1

可能是因为您的<img>仍被声明为内联级元素。使用：

.HeaderNav img {
    display: block;
}

此外，您应该检查是否已为图像元素指定了边距或填充。如果您这样做，请重置它们。

Answer 2

好的，这里有一些事情。

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

此外，如果您将图像浮动到左侧，您可以摆脱间距：

.HeaderNav img {
    float: left;
}

请注意，我不知道为什么首先存在间距。另一个提示：你应该使用Chrome中的'Inspect Element'或Firefox中的Firebug来查看元素并查看填充，边距等。通常情况下，显而易见的是空白来自哪里，尽管在这种情况下我什么也没找到。漂浮在左边只是一个似乎有用的想法。

Answer 3

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

所以，试试这个：

    body, html {

         margin: 0;
         padding: 0;
    }

HTML不能单独使用;它必须让CSS持续使用它。

Answer 4

有点令人困惑的问题，我不明白这一切。但请查看此jsFiddle。这是你的意思吗？

同时从第一张图片中删除 HeaderNav 类。

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

Answer 5

img元素默认显示类型如inline-block，因为字体大小，所以img元素可能有3px空间。

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

.HeaderNav img {
    display: block;
}

或

.HeaderNav img {
    float: left;
}

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

图像之间的Div间距

5 个答案: