Question

我尝试将边距和边框设置为0，但仍无法正常工作。

<style type="text/css">
img {margin:0;}
</style>
<body>

<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />

如何让两张图像保持接近？

Answer 1

您可以消除图像的css，并将图像标记放在同一行，没有空格。

<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />

Answer 2

评论他们之间的换行符。

   <img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />

为什么呢？ HTML允许代码格式化的空间（破坏和非破坏），但只显示第一个。在您的情况下，位于不同行上的图像被解释为它们之间的空间。最简单的解决方案是将它们放在一行上，但这不是可读的。

Answer 3

<style type="text/css">
img {margin:0; float: left;}
</style>

Answer 4

我刚遇到这个问题，但无法找到问题的答案，首先我不希望我的图像向左浮动;第二，使用 diplay：block 不是一个好主意，因为我想要它们在线，也 display：block in-line 使得它不起作用。

解决方案非常简单，取出＆＃34;输入＆＃34;并将您的图像放在同一行。我解释一下：

WRONG

<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>

行

<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>

所以希望它有所帮助。

Answer 5

这个css应该将图像粘在一起，没有任何空间，线条断裂或图像之间的边界......

<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>

Answer 6

我建议将每个图像放在一个样式为float的单个div中：left。这两个div应该包含在一个父div中，它本身就是float：left like，

<div style="float:left">
<div style="float:left">
<img src="/static/btnNext.gif" border="0" />
</div>
<div style="float:left">
<img src="/static/btnSave.gif" border="0" />
</div>
</div>

Answer 7

删除img代码之间的空格并使用css vertical-align:top

HTML：

<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>

CSS：

img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}

如何删除两个图像之间的边距？

7 个答案: