Html <img> 标签之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5220823/
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
space between <img> tags
提问by Omega
if i use this code (with spaces between the two tags):
如果我使用此代码（两个标签之间有空格）：
<img src="....." style="border:0px;margin:0px" />
<img src="....." style="border:0px;margin:0px" />
there are 4 pixels between images. if I use this:
图像之间有 4 个像素。如果我使用这个：
<img src="....." style="border:0px;margin:0px" /><img src="...." style="border:0px;margin:0px" />
the space between images disappear, on all browsers!
在所有浏览器上，图像之间的空间消失了！
Why????????
为什么？？？？？？？？
采纳答案by Michael
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;float:left;width:200px;" />
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;clear:both;width:200px;" />
回答by wsanville
That's because white space is significant for inline elements. You can always float your images if you want to have them line up.
那是因为空白对于内联元素很重要。如果您想让它们排列起来，您可以随时浮动您的图像。
Edit: As requested, here is a simple example:
编辑：根据要求，这是一个简单的例子：
/* This is used to "clear" the floated elements */
.images { overflow: hidden; width: 100% }
/* float the elements so that white space does not matter */
.images img { float: left; }<div class="images">
<img src="http://dummyimage.com/150x100/000/fff&text=first+image" alt="first image" />
<img src="http://dummyimage.com/150x100/6aa8de/fff&text=second+image" alt="second image" />
<img src="http://dummyimage.com/150x100/ff6500/fff&text=third+image" alt="third image" />
</div>回答by Quentin
For the same reason that there is a space between the letters a and b in this paragraph:
出于同样的原因，本段中的字母 a 和 b 之间有一个空格：
<p>a
b</p>
Any kind of space in HTML is treated as a space (and collapsed into a single space).
HTML 中的任何类型的空格都被视为一个空格（并折叠为一个空格）。
回答by Spudley
The reason for this is because HTML treats a new line character as white space, and white space is printed.
这样做的原因是因为 HTML 将换行符视为空白，并打印空白。
回答by Joeri Hendrickx
This happens because your newline is rendered as a space.
发生这种情况是因为您的换行符被渲染为空格。
To avoid it, make sure there's no whitespace between your tags. Here's what I usually do:
为避免这种情况，请确保标签之间没有空格。这是我通常做的：
<img src="....." style="border:0px;margin:0px"
/><img src="....." style="border:0px;margin:0px" />
Sure, it's ugly. But it's the best way to deal with it.
没错，就是丑。但这是最好的处理方式。
Note about the other answers: Floats have all kinds of different effects that you probably don't want (most importantly, they float next to your other content). If you just want inline images, this is your solution.
请注意其他答案：浮动具有您可能不想要的各种不同效果（最重要的是，它们浮动在您的其他内容旁边）。如果您只想要内嵌图像，这就是您的解决方案。
回答by Davor
If you don't have any text in that div with images, font-size:0; also fixes this issue
如果该 div 中没有任何带有图像的文本，则 font-size:0; 也解决了这个问题
回答by Pmpr
There are so many good answers to this question, but I think there is chance this could be useful for anyone who will come to this in future.
这个问题有很多很好的答案，但我认为这对将来会遇到这个问题的任何人都有可能有用。
<img>elements flow inline like text, but also have a width and height like block elements. In CSS, you can set an element to display: inline-blockto make it replicate the behavior of images, so it would be nice to think of <img>s as inline-blocks (browsers technically use display: inlinebut they are giving special treatment to images like inline-blockelements).
<img>元素像文本一样内联流动，但也像块元素一样具有宽度和高度。在 CSS 中，您可以设置一个元素以display: inline-block使其复制图像的行为，因此最好将<img>s 视为inline-blocks（浏览器在技术上使用，display: inline但它们对像inline-block元素这样的图像给予特殊处理）。
So if you add a white-space like
所以如果你添加一个空格，比如
- space
- tab
- newine
- 空间
- 标签
- 纽宁
between them, a gap will appear.
他们之间，会出现一道缝隙。
Depending on the situation, you can use either of the following methods to get rid of the gap:
根据情况，您可以使用以下任一方法来消除间隙：
- Add a negative
margin-left - Use float
Remove the whitespacebetween the elements, which can be done:
1- Put theme in one line
<img src="..."><img src="...">2- Removing the space
<img src="...">< img src="...">3- Use HTML comments
<img src="..."><!-- --><img src="...">4- Skip the closing tag (in case there it is like
li). (HTML5 only)<ul> <li>First <li>Second </ul>5-
font-size: 0on parent element
- 添加负数
margin-left - 使用浮动
去除元素之间的空格，可以这样做：
1- 将主题放在一行
<img src="..."><img src="...">2-删除空间
<img src="...">< img src="...">3- 使用 HTML 注释
<img src="..."><!-- --><img src="...">4- 跳过结束标签（以防它像
li）。（仅限 HTML5）<ul> <li>First <li>Second </ul>5-
font-size: 0在父元素上
