显示：内联块 – 这是什么空间？

内联块在它们之间有这个奇怪的空间。 我可以忍受它，直到一个点，如果我加载一个AJAX呼叫更多的内容，微小的空间消失。 我知道我在这里错过了一些东西。

div { width: 100px; height: auto; border: 1px solid red; outline: 1px solid blue; margin: 0; padding: 0; display: inline-block; } 

http://jsfiddle.net/AWMMT/

如何使内联块的间距一致？

Answer 1

该空间在HTML中。 有几种可能的解决scheme。 从最好到最差：

1. 删除HTML中的实际空间（理想情况下，您的服务器可以在提供文件时为您执行此操作，或者至less您的input模板可以适当间隔） http://jsfiddle.net/AWMMT/2/
2. 使用float: left代替display: inline-block ，但是这对高度有不良影响： http : //jsfiddle.net/AWMMT/3/
3. 将容器的font-size设置为0，并为内部元素设置适当的font-size ： http : //jsfiddle.net/AWMMT/4/ – 这很简单，但是不能利用相对字体内部元素的大小规则（百分比，em）

Answer 2

http://jsfiddle.net/AWMMT/1/

 <div>...</div><div>...</div> ^ |--- no whitespace/new line here. 

您的空间是浏览器在显示时转换为“空格”的新行。

或者你可以尝试用CSS来破解一下：

http://jsfiddle.net/AWMMT/6/

 body { white-space: -0.125em; } body > * { white-space: 0; /* reset to default */ } 

Answer 3

实际上有一个非常简单的方法来从内联块中删除空白，这既简单又语义。 它被称为具有零宽度空间的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（由内嵌元素的浏览器在分隔线上时添加）。 一旦你声明了字体，你只需要改变容器上的font-family，然后再改回来。 喜欢这个：

 @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; } 

适合品尝。 这是一个下载到我刚在font-forge制作的字体，并使用FontSquirrel webfont生成器进行转换。 花了我5分钟。 包含css @ font-face声明： 压缩的零宽度空间字体 。 它位于Google云端硬盘中，因此您需要点击文件>下载将其保存到您的计算机上。 如果将声明复制到主css文件中，您可能还需要更改字体path。

Answer 4

你可以评论空白。

2013年的原始答案

喜欢：

 <span>Text</span><!-- --><span>Text 2</span> 

编辑2016：

我也喜欢下面的方法，你只需把右括号放在下面的元素之前。

 <span>Text</span ><span>Text 2</span> 

Answer 5

你也可以这样做（恕我直言，我相信这是正确的）

 <div class="div1">...</div> <div class="div1">...</div> . . .div1{ display:inline-block; } .div1::before, div1::after { white-space-collapse:collapse; }