图像之间的垂直间距答案

【问题标题】：vertical spacing between images图像之间的垂直间距
【发布时间】：2018-06-14 02:13:55
【问题描述】：

我将一张图片剪成三张相等的图片，现在我在 html 代码中拥有它，如下所示：

                        <img src="images/disclosure2_01.jpg" alt="Disclosure">
                        <img src="images/disclosure2_02.gif" alt="Disclosure2">
                        <img src="images/disclosure2_03.gif" alt="Disclosure3">

图像在网站上呈现如下：

我想知道是否可以删除图像和图像之间的垂直间距，使其看起来像一张完整的图片。提前感谢您的帮助。

【问题讨论】：

标签： html

【解决方案1】：

垂直空间是因为属性“display”是“inline”，解决了它在其父元素中将字体大小保持为零。或将显示属性更改为要“阻止”的图像。

<div style="font-size:0">
   <img src="images/disclosure2_01.jpg" alt="Disclosure">
   <img src="images/disclosure2_02.gif" alt="Disclosure2">
   <img src="images/disclosure2_03.gif" alt="Disclosure3">
</div>

【讨论】：

【解决方案2】：

试试这个。删除它们之间的线。

<img src="images/disclosure2_01.jpg" alt="Disclosure"><img src="images/disclosure2_02.gif" alt="Disclosure2"><img src="images/disclosure2_03.gif" alt="Disclosure3">

或者修改css。

img { padding: 0; margin: 0; }

【讨论】：

【解决方案3】：

将每个图像的边距和内边距设置为 0。

<img style="margin:0px; padding:0px;" src="..." />

【讨论】：

【解决方案4】：

是否有任何 CSS 为图像添加边距/填充？

尝试添加这个；

img { padding: 0; margin: 0; }

【讨论】：

【解决方案5】：

将图片的vertical-align设置为middle：

img {
  vertical-align: middle;
}

<img src="https://dummyimage.com/600x100/150/6ff">
<img src="https://dummyimage.com/600x100/6ff/150">

【讨论】：