如何在HTML页面中删除一行中元素之间的空格？

22 浏览
0 Comments

如何在HTML页面中删除一行中元素之间的空格？

我正在以这种方式在一行中显示3个：

如你所见，我在图像周围有细黑色边框。我的问题是相邻图像边框之间有大约5像素宽的白色空白区域，我已将边距设置为0像素，但不起作用。所以这里发生了什么？

0

3 答案

0 Comments

问题出现的原因是在 HTML 页面中，使用元素在一行中显示多个图片时，图片之间会出现间隙。解决这个问题的方法是通过设置容器的字体大小为零来消除间隙。具体的代码如下：

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>

通过在CSS中设置.imgContainer的字体大小为0px，可以将容器中的文字大小设置为零，从而消除了图片之间的间隙。此外，使用white-space: nowrap;可以防止文字换行，确保图片在一行中水平排列。

0
0 Comments

问题的原因是在标签之间存在空格或换行符，导致在html页面中显示出间隔。解决方法有两种：一种是删除标签之间的空格和换行符，另一种是在标签之间添加注释以保留换行符。此外，还有一位用户提到，浏览器会将空格和换行符解释为间隔，这取决于所使用的IDE，因此建议采用更可靠的解决方案。

0
0 Comments

img元素是内联元素，所以在div中会显示空格和换行符。为了避免这种情况，可以对图像进行浮动，但同时还需要在容器中添加溢出属性：

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

容器中的溢出属性是必需的，以便容器可以包含图像，否则容器将会折叠。

0