Html 如何去除两个图像之间的边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1643997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the margin between two images?
提问by Mak
I've tried to set the margin and border to 0,but still not working.
我试图将边距和边框设置为 0，但仍然无法正常工作。
<style type="text/css">
img {margin:0;}
</style>
<body>
<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />
How to make two images stay close to each other?
如何使两个图像彼此靠近？
回答by jay
You can eliminate the css for the image and put the image tags on the same line with no space.
您可以消除图像的 css 并将图像标签放在同一行没有空格。
<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
回答by Gary
Comment-out the line break between them.
注释掉它们之间的换行符。
<img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />
Why? HTML allows as many spaces (both breaking and non) for code formatting, but only displays the first. In your case, the images being on different lines is being interpreted as a space between them. The simplest solution is to put them both on one line, but that isn't as readable.
为什么？HTML 允许尽可能多的空格（包括中断和非）用于代码格式化，但只显示第一个。在您的情况下，位于不同行上的图像被解释为它们之间的空间。最简单的解决方案是将它们放在一行上，但这不是那么可读。
回答by o.k.w
<style type="text/css">
img {margin:0; float: left;}
</style>
回答by Alejandro
I just had this problem, but couldn't find an answer to my problem, first i don't want my images to float left; second, using diplay:blockis not a good idea because i want them in-line, also display:block in-linemakes doesn't work.
我刚遇到这个问题，但找不到问题的答案，首先我不希望我的图像向左浮动；其次，使用diplay:block不是一个好主意，因为我希望它们内嵌，而且display:block in-line也不起作用。
The SOLUTION is quite easy, take out the "enter" and put your images in the same line. I explain:
解决方案非常简单，取出“输入”并将您的图像放在同一行中。我解释：
WRONG
错误的
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
OK
好的
<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>
So hope it helps.
所以希望它有所帮助。
回答by Ala' Alnajjar
Remove spaces between imgtags and use css vertical-align:top
删除img标签之间的空格并使用 cssvertical-align:top
HTML:
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'/>
<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:
CSS：
img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}
回答by Webking
this css should stick the images close to eachother without any space, linebreaks or borders between the images...
这个 css 应该将图像贴近彼此，图像之间没有任何空间、换行符或边框......
<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
回答by Justin Samuel
I would suggest to put each image in a individual div having style float:left. These 2 divs should be enclosed within a parent div which itself is float: left like,
我建议将每个图像放在一个单独的 div 中，样式为 float:left。这 2 个 div 应该包含在一个父 div 中，它本身是浮动的：左如，
<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>
