将图像直接放在彼此之上答案

【问题标题】：Placing images directly on top of each other将图像直接放在彼此之上
【发布时间】：2014-03-09 17:26:01
【问题描述】：

我有这个 HTML 代码，我只想将图像直接放在彼此之上。（所以他们之间没有这条绿线）如何做到这一点？

示例网址：http://todolist.x10.mx/test.html

HTML 代码：

<!DOCTYPE html>

<html>
<head>

<title>test</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body bgcolor="green">
<img src="f.jpg" width="200" height="80" alt="plaatje1" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
<img src="f.jpg" width="200" height="80" alt="plaatje2" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
</body>
</html>

【问题讨论】：

第一张图片可以使用vertical-align =middle或margin bottom为-5px
内联元素没有顶部/底部边距。
@MohammedR.El-Khoudary <img> 是一个 replaced 内联元素，顶部/底部 margin 属性适用于图像。 Verify that.
感谢您提供的信息 :-) 我不知道

标签： html css image

【解决方案1】：

不要使用
而是添加以下 CSS：

img {
margin: 0;
display: block;
}

【讨论】：

它没有解决图像之间的绿线的原因。
有浏览器默认值..你试过设置边距：0;填充：0；在 * { } 选择器中？
如果你能提供一个 JSFiddle 我会更好地帮助你

【解决方案2】：

间隙属于行高保留字符，因为内联元素（本例中为图像）默认在其基线中垂直对齐。

您可以通过vertical-align: middle;（或top/bottom）垂直对齐内联元素以消除行之间的垂直间隙。

您可以参考my answer here了解更多信息。

另外，您可以简单地删除两行之间的<br>，并将图像的默认显示类型更改为block，如：display: block;。

【讨论】：