40

内联块之间有这个奇怪的空间。我可以忍受它，如果我通过 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/

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

4

5 回答 5

52

空格在 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）
于 2013-05-21T20:32:19.790 回答
23

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 */ }
于 2013-05-21T20:30:27.980 回答
9

实际上有一种非常简单的方法可以从 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 文件，您可能还需要更改字体路径。

于 2013-12-09T14:41:21.627 回答
8

您可以将空格注释掉。

2013年的原始答案

喜欢：

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

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

2016年编辑：

我也喜欢以下方法，您只需将右括号放在以下元素之前。

<span>Text</span

><span>Text 2</span>
于 2013-09-05T15:15:32.370 回答
1

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

<div class="div1">...</div>
<div class="div1">...</div>
.
.

.div1{
    display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }
于 2014-07-02T17:53:29.507 回答