Html 如何消除 CSS 中内联元素之间的间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6213354/
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 can I eliminate spacing between inline elements in CSS?
提问by Jake Petroules
I have a div with a bunch of image tags inside, here is an example:
我有一个里面有一堆图像标签的 div，这是一个例子：
<div style="margin: 0; padding: 0; border: 0;">
<a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
<a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
<a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>
Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that's useless even with a negative value. Basically I'm going for something like Twitter has at the bottom of their home page. I looked at their code and they're using an unordered list. I could just do that but I'd like the technical explanation for why there appears to be no way to eliminate the white space from between these images.
因为标签之间有空格，浏览器会在图像之间显示一些空格（Chrome 决定为 4px）。如何告诉浏览器在图像之间不显示任何空白，而不将 > 和 < 直接放在彼此旁边？我知道除了浏览器决定使用的内容之外，字母间距也适用，因此即使是负值也是无用的。基本上，我要寻找类似 Twitter 主页底部的内容。我查看了他们的代码，他们使用的是无序列表。我可以这样做，但我想要技术解释为什么似乎无法消除这些图像之间的空白。
采纳答案by Sotiris
try to add img {margin:0;padding:0;float:left}
尝试添加 img {margin:0;padding:0;float:left}
in other words remove any default marginand paddingof browsers for imgand floatthem.
换句话说，删除任何默认margin，并padding为浏览器img和float它们。
回答by thirtydot
If you for some reason want to do it:
如果您出于某种原因想要这样做：
- without using
floats, and; - without collapsing the whitespace in your HTML (which is the easiest solution, and for what it's worth, what Twitter is doing)
- 不使用
floats，并且； - 不折叠 HTML 中的空格（这是最简单的解决方案，而且它的价值在于 Twitter 正在做什么）
You can use the solution from here:
您可以从这里使用解决方案：
How to remove the space between inline-block elements?
I've refined it slightly since then.
从那以后我稍微改进了它。
See:http://jsfiddle.net/JVd7G/
见：http : //jsfiddle.net/JVd7G/
letter-spacing: -1pxis to fix Safari.
letter-spacing: -1px是修复Safari。
div {
font-size: 0;
letter-spacing: -1px
}
<div style="margin: 0; padding: 0; border: 0;">
<a href="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
<a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
<a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>
回答by ThinkingStiff
Simplest solution that doesn't muck with layout and preserves code formatting:
不破坏布局并保留代码格式的最简单的解决方案：
<div style="margin: 0; padding: 0; border: 0;">
<a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
--><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
--><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>
回答by Adam Hutchinson
The spacing causes the images to move as they are inline elements. If you want them to stack up, you could use the unordered list (as twitter does) as this will put each image inside a block element.
间距导致图像移动，因为它们是内联元素。如果你想让它们堆叠起来，你可以使用无序列表（就像 twitter 那样），因为这会将每个图像放在一个块元素中。
Inline elements are displayed inline with text.
内联元素与文本内联显示。
回答by Cata
You can also make all anchors to float-left and set margin-left to -1
您还可以使所有锚点向左浮动并将 margin-left 设置为 -1
回答by ??????
If you are serving your pages with Apache then you can use the Google PageSpeed Module. This has options that you can use to collapse whitespace:
如果您使用 Apache 为您的页面提供服务，那么您可以使用 Google PageSpeed 模块。这具有可用于折叠空白的选项：
http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html
http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html
You do not have to use the more 'dangerous' options of PageSpeed.
您不必使用 PageSpeed 更“危险”的选项。
Also see the answers in this question for how to remove whitespace in CSS:
另请参阅此问题中有关如何删除 CSS 中的空格的答案：
回答by Daniel F
It looks like using a table is the correct way to go about this, as whitespaces have no effect between cells.
看起来使用表格是解决此问题的正确方法，因为空格在单元格之间没有影响。
回答by G. Arico
Add style="display:block"to your imgtags.
添加style="display:block"到您的img标签。
