0

我想使用 html 拼接一堆图像，但问题是它们有边距，我使用网络检查器查找哪些属性会影响这一点，但一个小时或更短的时间仍然无法弄清楚。

我尝试过使用负边距，使用伪选择器的负位置，虽然它工作得很好，但这不是正确的方式吗？

https://dl.dropbox.com/u/2321732/stitch_images/index.html

所以现在我想要最干净的缝合方式使图像没有任何边距。

4

4 回答 4

7

添加以下内容：

body {
    font-size: 0;
}

这是因为源代码中的新行，浏览器将其呈现为空格。

以上内容可防止呈现空格，但您也可以从源代码中删除换行符（因此标签都在一行上）。

于 2013-01-02T10:20:22.247 回答
2

将 img-tags 写在一行中

    <img src="images/0_0.jpg" alt=""><img src="images/1_0.jpg" alt=""><img src="images/2_0.jpg" alt="">
    <br>

    <img src="images/0_1.jpg" alt=""><img src="images/1_1.jpg" alt=""><img src="images/2_1.jpg" alt="">
    <br>

    <img src="images/0_2.jpg" alt=""><img src="images/1_2.jpg" alt=""><img src="images/2_2.jpg" alt="">

于 2013-01-02T10:21:51.577 回答
2

将您的图像设置为display: block; float: left和您的 brfloat: left; clear: right

于 2013-01-02T10:23:06.273 回答
2

如果您使用 em 作为尺寸单位，Abody97 的解决方案可能会导致问题。将所有内容写在一行中会使阅读变得更加困难。
您可以改为制作图像float: left并设置overflow: hidden为父元素。
但是，如果由于某种原因不能浮动元素，则可以使用注释，如下所示：

<div>
    <img src="1.jpg" alt=""><!--
 --><img src="2.jpg" alt=""><!--
 --><img src="3.jpg" alt="">
</div>
于 2013-01-02T17:52:11.570 回答