Html 垂直对齐3个图像

我有3个图像，我想垂直对齐，但我似乎无法让它正常工作。我的图像从1个现有图像分割为3个部分。您可以看到从一个图像到另一个图像的轻微过渡。我错过了什么

HTML:

---

JS Fiddle:

将以下内容添加到CSS中：

.Wrapper {
    font-size:0;
}

---

为什么会发生这种情况？

img

是一个内联元素，内联元素像文本一样流动。小空格就是由于这个原因。可能的解决办法：

将显示从

inline

更改为其他-例如添加

display:block

将

垂直对齐

属性更改为

顶部

（默认为

基线

）

在内联元素的包含块上，通过

font-size:0

将文本大小缩小为0

示例

将

vertical align:top

添加到所有三幅图像中-请参见下面的内容和片段：

#image-1 img，
#图2 img，
#图像-3 img{
背景色：#00f；
垂直对齐：顶部；
}
.图-1，
.图-2，
图-3{
显示：块；
}
.包装纸{
垂直对齐：中间对齐；
显示：块；
}

---

只需在此列表中添加一个css属性即可

图像-1 img，#图像-2 img，#图像-3 img 到

---

浮动：左

只是为了澄清，字体大小应该在父级上调整，在本例中是包装器，而不是img本身。@ovokuro当然是包含块或包装器。。。谢谢你指出这一点……很抱歉我解释错了。我不担心我的图片之间的小空白，我已经在我的网站上得到了这部分工作，但是我的图片两侧的小过渡都带有小边缘。如果你仔细观察，你可以看到一个边缘形状，如果图像是“完整的”。也很抱歉很晚才回复。圣诞节和所有：Dno问题。。。在Android浏览器中，我可以在每张图片周围找到一个模糊的边框/轮廓，你猜你在说什么？看起来这是由于浏览器中的图像渲染造成的。。。

.Wrapper {
    font-size:0;
}