Question

在this page上，在产品说明区域中，我插入了许多图片。图像之间存在间隔破坏描述区域的外观和感觉。我已经将描述区域代码写在一个单独的html文件中，并且没有显示间距，但是当我进入这个网站时，它会显示这个间距。

以下是描述区域的代码：

<div class="user-html">
 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_01_zpsf96f2f18.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_02_zps5735a5a8.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_03_zpsf4933cc6.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_04_zpsd74ee7ae.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_05_zps103cc79e.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_06_zps113ee0a8.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_07_zps7e7846f8.jpg" alt="\\"> 

<img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_08_zpsa14f563d.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_09_zps98ea736c.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_10_zpse05cb796.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_11_zps895af16e.jpg" alt="\\"> 

 <img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_12_zps69ebae8b.png" alt="\\">
</div>

请告知如何摆脱这些空间。

更新：当我在themeforest网站的描述框区域中输入任何内嵌样式标记时，它会删除所有样式标记。因此，下面列出的所有答案都不起作用。还有其他解决办法吗？

Answer 1

在这种情况下摆脱空白的一个CSS技巧是：

.user-html {
    font-size: 0;
    line-height: 0;
}

另一个是避免图像的inline-block显示（这是空白的原因）：

.user-html img {
    display: block;
}

这将适用于您的情况，因为每行有一个图像，否则您必须使用第一个示例来消除空白。

Answer 2

对于您的情况，以下将删除图像之间的空格

.user-html img {
    float: left;
}

在您在问题中链接的页面中进行了测试

顺便说一下白色空间的存在是因为两个图像标记之间有空格，这些标记被渲染为空白

您可以通过复制粘贴以下代码来测试它：

<div class="user-html"><img src="http://www.picturesnew.com/media/images/images-photo.jpg" alt="\\"><img src="http://www.picturesnew.com/media/images/images-photo.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_03_zpsf4933cc6.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_04_zpsd74ee7ae.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_05_zps103cc79e.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_06_zps113ee0a8.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_07_zps7e7846f8.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_08_zpsa14f563d.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_09_zps98ea736c.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_10_zpse05cb796.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_11_zps895af16e.jpg" alt="\\"><img src="http://i956.photobucket.com/albums/ae49/anwartheravian/Slice_12_zps69ebae8b.png" alt="\\"></div>

图像之间不需要的间距

2 个答案: