html - html：垂直放置img，中间没有空格

Question

我将图像彼此垂直放置。我希望他们彼此相撞，但我在他们之间找到了一条空白线。我该如何摆脱这条线？我试过margin = 0px。我也试过不把它们放在一个div中。

（下图来自W3编辑器）

<div>
    <img border="0" src="/images/pulpit.jpg" width="304" height="228" style = "margin:0px;">
</div>
<div>
    <img border="0" src="/images/pulpit.jpg" width="304" height="228" style = "margin:0px;">
</div>

Answer 1

添加 css 属性display:block应该可以解决问题。我还删除了填充和边距以消除任何其他样式。所有样式都应该移动到 CSS 块而不是内联。

img {
  padding: 0;
  margin: 0;
  display: block;
}

<div>
  <img border="0" src="https://dummyimage.com/200x100/1ff/100">
</div>
<div>
  <img border="0" src="https://dummyimage.com/200x100/100/1ff">
</div>

Answer 2

做这个。如果您使用表格来显示图像，它会起作用。

<style type="text/css">

table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table tr,
table td
{
padding:0;
}
</style>

<table>
<tr>
<td>
<img src="side1.jpg" />

</td>
</tr>
<tr>
<td>    
<img src="side2.jpg" />
</td>
</tr>
</table>

它适用于垂直和水平图像。就像拼图一样。问候。