显示：内联块 - 那个空间是什么？ [复制]

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 中。有几种可能的解决方案。从最好到最差：

1. 删除 HTML 中的实际空间（理想情况下，您的服务器可以在提供文件时为您执行此操作，或者至少您的输入模板可以适当间隔）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 破解一下：

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

实际上有一种非常简单的方法可以从 inline-block 中删除空格，既简单又符合语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（当内联元素位于单独的行时由浏览器添加）。声明字体后，只需更改容器上的字体系列，然后再更改子代，瞧。像这样：

@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 云端硬盘中，因此您需要单击文件 > 下载以将其保存到您的计算机。如果将声明复制到主 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; }