CSS 显示：内联块 - 那个空间是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16678929/
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
Display: Inline block - What is that space?
提问by justnorris
Inline Blocks have this weird space in-between them. I could live with it, up to a point where, if I load more content with an AJAX Call, the tiny space goes away. I know I'm missing something here.
内联块之间有这个奇怪的空间。我可以忍受它，如果我使用 AJAX 调用加载更多内容，那么微小的空间就会消失。我知道我在这里遗漏了一些东西。
div {
width: 100px;
height: auto;
border: 1px solid red;
outline: 1px solid blue;
margin: 0;
padding: 0;
display: inline-block;
}
How to make the spacing consistent in Inline blocks ?
如何使 Inline 块中的间距保持一致？
回答by Explosion Pills
The space is in the HTML. There are several possible solutions. From best to worst:
空格在 HTML 中。有几种可能的解决方案。从最好到最坏：
- Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
- Use
float: leftinstead ofdisplay: inline-block, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/ - Set the container's
font-sizeto 0 and set an appropriatefont-sizefor the internal elements: http://jsfiddle.net/AWMMT/4/-- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)
- 删除 HTML 中的实际空间（理想情况下，您的服务器可以在提供文件时为您执行此操作，或者至少您的输入模板可以适当间隔）http://jsfiddle.net/AWMMT/2/
- 使用
float: left代替display: inline-block，但这对高度有不良影响：http: //jsfiddle.net/AWMMT/3/ - 将容器设置
font-size为 0 并font-size为内部元素设置一个合适的：http: //jsfiddle.net/AWMMT/4/——这很简单，但是你不能利用内部元素的相对字体大小规则（百分比，em）
回答by bwoebi
<div>...</div><div>...</div>
^
|--- no whitespace/new line here.
Your spaces were the new lines the browser converted to "spaces" when displaying it.
您的空格是浏览器在显示时转换为“空格”的新行。
Or you could try to hack a bit with CSS:
或者你可以尝试用 CSS 修改一下：
A flexbox conveniently ignores whitespace between its child elements and will display similarly to consecutive inline-block elements.
一个 flexbox 可以方便地忽略其子元素之间的空白，并且会像连续的 inline-block 元素一样显示。
http://jsfiddle.net/AWMMT/470/
http://jsfiddle.net/AWMMT/470/
body { display: flex; flex-wrap: wrap; align-items: end; }
Old answer(still applies to older, pre-flexbox browsers) http://jsfiddle.net/AWMMT/6/
body { white-space: -0.125em; } body > * { white-space: 0; /* reset to default */ }
旧答案（仍然适用于旧的、pre-flexbox 浏览器） http://jsfiddle.net/AWMMT/6/
body { white-space: -0.125em; } body > * { white-space: 0; /* reset to default */ }
回答by Aldfrith
There's actually a really simple way to remove whitespace from inline-block that's both easy and semantic. It's called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:
实际上有一种非常简单的方法可以从内联块中删除空格，既简单又语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（由浏览器为行内元素添加）。声明字体后，您只需更改容器上的字体系列，然后再更改子项，瞧。像这样：
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here's a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css @font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
适合口味。这是我刚刚在 font-forge 中制作并使用 FontSquirrel webfont 生成器转换的字体的下载。花了我5分钟。包含 css @font-face 声明：zipped zero-width space font。它位于 Google 云端硬盘中，因此您需要单击“文件”>“下载”将其保存到您的计算机。如果您将声明复制到主 css 文件，您可能还需要更改字体路径。
回答by jakub_jo
You can comment the whitespace out.
您可以将空格注释掉。
Original answer from 2013
2013 年的原始答案
Like:
喜欢：
<span>Text</span><!--
--><span>Text 2</span>
Edit 2016:
2016年编辑：
I also like the following method, where you just put the closing bracket right before the following element.
我也喜欢以下方法，您只需将右括号放在以下元素之前。
<span>Text</span
><span>Text 2</span>
回答by jakub_jo
Also you can do it like this (which IMHO,I believe is sintatically correct)
你也可以这样做（恕我直言，我相信这是正确的）
<div class="div1">...</div>
<div class="div1">...</div>
.
.
.div1{
display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }
