CSS 两个 inline-block <span> 元素之间的间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10207992/
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
The gap between two inline-block <span> element
提问by chaonextdoor
I created two elements together in html and made each an inline-block. I found that there was always a gap between these two elements but actually I didn't set any padding/margin attibutes for them. Could someone tell me why and how I can fix this gap?
我在 html 中一起创建了两个元素，并使每个元素成为一个内联块。我发现这两个元素之间总是存在差距，但实际上我没有为它们设置任何填充/边距属性。有人能告诉我为什么以及如何解决这个差距吗？
回答by Juan G. Hurtado
CSS:
CSS：
span {
display: inline-block;
}
HTML:
HTML：
<span>This will have</span>
<span>a gap between the elements</span>
<span>This won't have</span><span>a gap between the elements</span>
回答by ThinkingStiff
You can remove whitespace and keep nice code formatting using HTML comments.
您可以使用 HTML 注释删除空格并保持良好的代码格式。
<span>1</span><!--
--><span>2</span><!--
--><span>3</span>
回答by Fabrizio Calderan
when you use inline-blocks, to remove the margin just apply word-spacing: -3px;and letter-spacing: -3px;to the parent containerand then revert these rules on inline-block elements with word-spacing: normal;and letter-spacing: normal;
当您使用inline-blocks，除去保证金只是申请word-spacing: -3px;和letter-spacing: -3px;于父容器，然后恢复与inline-block的元素，这些规则word-spacing: normal;和letter-spacing: normal;
e.g. with this basic markup
例如使用这个基本标记
<div>
<span>...</span>
<span>...</span>
<span>...</span>
</div>
the minimal CSS code is
最小的 CSS 代码是
div {
word-spacing: -3px;
letter-spacing: -3px;
}
span {
word-spacing: normal;
letter-spacing: normal;
display: inline-block;
}
Another possibility (that I don't recommend but it could useful for you to know, anyway) is to set font-size: 0;to the parent container.
另一种可能性（我不推荐，但无论如何它可能对您有用）是设置font-size: 0;为父容器。
回答by Starx
This is a weird behavior, which can be fixed, changed your markup to something like this.
这是一种奇怪的行为，可以修复，将您的标记更改为类似的内容。
<div class="inline">
first
</div><div class="inline">
second
</div>
Do not put any space, when defining another inline element.
定义另一个内联元素时不要放置任何空格。
