html - 图像之间的差距？

Question

请参阅此处的示例：

我尝试将图像设置为 display:block -

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

但这没有用。

我也尝试添加

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

到

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

但这些都不起作用。

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

score 3 · Accepted Answer

尝试将它们放在类名为“.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;
}

score 2 · Accepted Answer

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

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

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

p { margin: 0px; }

score 1 · Accepted Answer

如果您正在谈论的间隙是图像之间的垂直间隙，那么您的问题是<p>第二个中的上边距.item .description。这是造成差距的元素。

.description p { margin-top: 0 }

交替：

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

.description .first { margin-top: 0 }

score 1 · Accepted Answer

好的，测试了一个作品。

删除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>

score 0 · Accepted Answer

你应该<div style="clear: both;" />在你的第一个<div>.

你也可以删除它：

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

score 0 · Accepted Answer

0

给定页面的快速修复：添加float:left到.itemcss 块。

于 2012-09-07T18:59:45.087 回答

score 0 · Accepted Answer

0

在 CSS 中进行重置...

*{ 填充：0；边距：0；}

于 2012-09-07T18:59:45.770 回答

score 0 · Accepted Answer

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

8 回答 8