如何摆脱html页面中行中<img>元素之间的空间？

Question

我<img>这样连续显示3 个:

<div style="width: 950px">

                <img src='/UploadedImages/86.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/85.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/84.gif' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

        </div>

如你所见,我的图像周围有薄黑边框.我的问题是在相邻图像的边界之间有大约5px宽的空白区域,并且我将边距设置为0px但是它不起作用.那么这里发生了什么？

Answer 1

您必须删除标记之间的空格(换行符和空格):

<img src='/UploadedImages/86.jpg' alt='' style="..." /><img src='/UploadedImages/85.jpg' alt='' style="..." />

或发表评论以保持换行符:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><!--

--><img src='/UploadedImages/85.jpg' alt='' style="..." />

Answer 2

An img是一个内联元素(有点......),因此空格和换行符会显示在您的内容中div.为了避免这种情况,您可以浮动图像,但是您还必须向容器添加溢出:

div {
  overflow: hidden;
}
div img {
  float: left;
}

需要容器上的溢出,以便容器封装图像.否则会崩溃.