Question

我有这个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>

Answer 1

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

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

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

此外，您只需删除两行之间的<br>，然后将图片的默认显示类型更改为block，如下：display: block;。

Answer 2

不要使用＆lt; br /＆gt;而是添加以下CSS：

img {
margin: 0;
display: block;
}

将图像直接放在彼此之上

2 个答案: