Html CSS无法并排放置图像列表

我有一个CSS图像列表，需要并排对齐。我的意思是两个相邻的图像应该共享一个共同的边界。因此，如果有20个图像，我想将它们堆叠成4行，每行可以根据屏幕大小进行更改。目前，图像之间有空白，这显然是我不想要的。我附加了一个JS小提琴来显示我在做什么

好心帮忙

CSS

---

要删除图像之间的空格，最简单的方法可能是删除HTML中元素之间的空白。您的图像被设置为

inline block

，这意味着元素之间的空白将像任何其他内联元素一样保留（如

span

或

a

或其他任何元素）

另一种方法是在容器上设置

font-size:0

，这将使元素之间的空格

0

大小，并将它们从显示中删除

另一种方法是

浮动

图像，这将使它们成为块级元素（因此不会保留空白），并将它们堆叠在一起

img{
最大宽度：200px；
高度：自动；
}
.font zero{
字号：0；
}
.浮动{
溢出：自动；
}
.浮动img{
浮动：左；
}

修复您的页边距。如果图片之间有不需要的空白，可能是因为您的边距为1em。如果你愿意的话，可以放上下两页边距，但不要放全页边距

首先，您必须创建一个宽度为25%的类组->

col25

。 然后为每个图像创建三个类，一个用于小型设备->

.scol25

， 一个用于中型设备->

.mcol25

，一个用于大型设备->

.lcol25

然后删除图像之间的边距，并使框大小调整边框框

.scol25, .mcol25, .lcol25 {
  box-sizing:border-box;
  margin-right:-3px;
  margin-top:-4px;
  text-align:center;
  padding:0px;
}

最后，设置每个屏幕大小的宽度和高度，以便始终能够显示四行四幅图像（手机上除外，手机上每行一幅图像）

...

不要忘记删除

标记之间的空格，这样就没有空格了

注：

margin top:-4px

我之所以添加，是因为它在联机编译器上不起作用，所以当您将其添加到页面时，可以删除该命令

希望能有帮助

链接：

---

如果链接没有显示代码，请告诉我。

我已经删除了HTML元素中的空格，但它不起作用。我尝试将字体大小设置为0，但当我将鼠标悬停在图像上时，文本不会显示。我尝试设置浮点值，但不幸的是，它不起作用。我已经更新了我的JS提琴，请看一下。@user340248您的JSFIDLE链接404's@user3402248您需要删除元素上的硬定义宽度和

图上的默认边距，然后我删除了HTML中设置为
内联块的
li
之间的空格，效果非常好！现在图像完全对齐了！非常感谢。还有一件事，当我将鼠标悬停在图像上时，黑色背景只占图像宽度的一半。它实际上应该覆盖整个图像。我试着修改宽度，但没用。图像的宽度为125px。你能帮我去掉页边空白吗？不幸的是，间距仍然存在。我已经更新了我的JS小提琴，请看一下。
.scol25, .mcol25, .lcol25 {
  box-sizing:border-box;
  margin-right:-3px;
  margin-top:-4px;
  text-align:center;
  padding:0px;
}

<div id="photo-grid">
<img id="img-1" class="photo" alt="alt-of-img"/>
...
<img id="img-16" class="photo" alt="alt-of-img"/>
</div>