图像之间的差距？

Question

请参阅此处的示例：

http://users.telenet.be/prullen/portfolio.html

我已尝试设置我的图片显示：阻止 -

display: block;
margin: 0;
padding: 0;

但这没效果。

我也尝试添加

 visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px

到

 <div style="clear:both"></div>

但这些都不起作用。

有谁知道原因可能是什么？如果可能，请明确：两者都应保持IE7兼容性。

Answer 1

您的段落标记是导致顶部和底部间隙的原因。段落（在chrome中）的默认值为：

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

只需将边距设置为0即可解决问题：

p { margin: 0px; }

Answer 2

尝试将它们放在类名为“.row”的div中，并将行高设置为0.

HTML：

<div class="row">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

CSS：

.row {
    line-height: 0;
}

Answer 3

如果您所谈论的差距是图像之间的垂直差距，那么您的问题就是第二个<p>中.item .description的上边距。这是弥补差距的因素。

.description p { margin-top: 0 }

可替换地：

<div class="description">
    <p class="first">Description goes here.</p>
</div>

.description .first { margin-top: 0 } 

Answer 4

好的，测试过一部作品。

删除clear:both div并将浮动样式设置为第一项。

<强>坏：

<div class="item">
    [...]
    <div style="clear:both;"></div>
</div>
<div class="item" style="border:red;">
    [...]
</div>

不可

<div class="item" style="float:left;">
    [...]
</div>
<div class="item" style="border:red;">
    [...]
</div>

Answer 5

您应该在第一个<div style="clear: both;" />之后添加<div>。

Fixed code

你也可以删除它：

<div style="clear:both;visiblity:hidden;overflow:hidden;height:0;font-size:1px;line-height:0px;"></div>

Answer 6

given page的快速修复： 将float:left添加到.item css块。

Answer 7

在CSS中重置...

* {padding：0;保证金：0; }

Answer 8

第二项的<p>标记将整个div向下推1行，因为它的默认顶部和底部边距通常为1em。当您将其边距设置为零时，这些项目将在彼此的顶部对齐。您需要设置<p>或为<p>创建一个类margin-top: 0px。