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

【问题标题】：How do I get rid of the space between <img> elements in a row in a html page?如何摆脱 html 页面中一行中 <img> 元素之间的空格？
【发布时间】：2011-06-04 18:44:11
【问题描述】：

我正在像这样连续显示 3 个<img>：

<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，但它不起作用。那么这里发生了什么？

【问题讨论】：

标签： html css

【解决方案1】：

您必须删除标签之间的空格（换行符和空格）：

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

或制作 cmets 以保留换行符：

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

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

【讨论】：

+1 空格是因为浏览器将它们之间的tab/return截取为空格造成的。
根据您使用的 IDE，这很容易中断，我会推荐一个更可靠的解决方案。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您可以通过将容器上的字体大小设置为零来消除间隙；

CSS

.imgContainer { 
    font-size: 0px ; 
    white-space: nowrap; 
}

HTML

<div class="imgContainer">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

【讨论】：

【解决方案4】：

将图像包裹在 ul 中并浮动 li：

<div style="width: 950px">
 <ul>
  <li><img src='/UploadedImages/86.jpg' alt='' /></li>
  <li><img src='/UploadedImages/85.jpg' alt='' /></li>
  <li><img src='/UploadedImages/84.jpg' alt='' /></li>
 </ul>
</div>

然后我们将 display:block; 添加到 img css:

 ul li {
 float:left;
 display:inline;
 list-style:none;
 }
 ul li img {
 border: 1px solid #000;
 display:block;
 padding: 0;
 width: 300px;
 }

jFiddle demo

【讨论】：