Question

内联块在它们之间有这个奇怪的空间。我可以忍受它，直到某一点，如果我用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/

如何在Inline块中使间距保持一致？

Answer 1

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

删除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）

Answer 2

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

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

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

或者您可以尝试使用CSS进行破解：

flexbox方便地忽略其子元素之间的空白，并且将显示与连续的内联块元素类似的内容。

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

旧答案（仍适用于较旧的pre-flexbox浏览器） 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声明：zipped zero-width space font。它位于Google云端硬盘中，因此您需要点击文件＆gt;下载以将其保存到您的计算机。如果将声明复制到主css文件，则可能还需要更改字体路径。

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

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

5 个答案: