图像之间不需要的间距答案

【问题标题】：Unwanted Spacing between images图像之间不需要的间距
【发布时间】：2014-07-02 00:45:56
【问题描述】：

在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>

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

更新：似乎当我在主题森林网站的描述框区域内输入任何内嵌样式标签时，它会去除所有样式标签。因此，下面列出的所有答案都不起作用。还有其他解决方案吗？

【问题讨论】：

@Medda86 空白不是来自图像边距，而是来自代码中的实际空白，它显示在行内块元素中。

标签： html css image spacing

【解决方案1】：

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

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

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

.user-html img {
    display: block;
}

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

【讨论】：

感谢您的回答。我已经指出了问题更新中的问题。如果你知道如何解决这个问题，请检查并告诉我。
我不确定您是否尝试为每个图像添加样式标签或内联样式。试试你没试过的那个。根据他们的指导，您应该可以使用一些 CSS：support.envato.com/index.php?/Knowledgebase/Article/View/262/41/… 如果一切都失败了，您可以将您的图像合并到一个图像文件中并像这样添加它。
看来一切都失败了，我必须将其显示为单个图像文件。不过感谢您的帮助。
不客气。好吧，如果你没有具体的理由来切割图片，我会说拥有一张图片实际上是一个很好的解决方案，而不是后备方案。

【解决方案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>

【讨论】：

Themeforest 正在剥离我添加的所有内联样式标签。您能提供任何建议吗？
您是否尝试复制粘贴 HTML 代码，我已包含在答案中？