关于html：如何删除内联块元素之间的空格？

How do I remove the space between inline-block elements?

这给了HTML和CSS。 P / < >

1
2
3
4
5

span {
display:inline-block;
width:100px;
background-color:palevioletred;
}

1
2
3
4
5
6

Foo 
 Bar

P / < >

作为一个结果，将有4，天窗；像素宽的空间之间的激情的元素。 P / < >

演示：/ / / / dghfv jsfiddle.net P / < >

我明白为什么这happens，我也知道，我能让你摆脱空间的removing白空间之间的跨度元素在HTML源代码，像这样： P / < >

1
2
3
4
5

Foo Bar

然而，我希望为CSS的解决办法这不能被require HTML源代码到你的tampered与。 P / < >

我知道如何到不能解决这个与javascript - by removing的正文nodes从集装箱元(款)，像这样： P / < >

1 2	// jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示：/ / / / / 1 dghfv jsfiddle.net P / < >

但这个问题可以在solved与CSS独立吗？ P / < >

相关讨论

因为这个答案已经很流行了，所以我正在改写它。

让我们不要忘记问的实际问题：

How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?

仅使用CSS就可以解决这个问题，但是没有完全健壮的CSS修复。

我在最初的回答中得到的解决方案是将font-size: 0添加到父元素中，然后在子元素上声明一个明智的font-size。

http://jsfidle.net/thirtydot/dghfv/1361/

这适用于所有现代浏览器的最新版本。它在IE8中工作。它在Safari 5中不起作用，但在Safari 6中起作用。Safari 5几乎是一个死浏览器(0.33%，2015年8月)。

相对字体大小的大多数可能问题都不难解决。

但是，如果你特别需要一个仅限于CSS的修复程序，这是一个合理的解决方案，但是如果你可以自由地更改HTML(就像我们大多数人一样)，我并不推荐这样做。

这就是我作为一个经验丰富的Web开发人员为解决这个问题所做的实际工作：

1
2
3
4
5

FooBar

是的，没错。我删除了内联块元素之间HTML中的空白。

这很容易。这很简单。它无处不在。这是务实的解决方案。

有时您需要仔细考虑空白的来源。用javascript附加另一个元素会增加空白吗？不，如果你做得好就不行。

让我们用一些新的HTML，用不同的方法来消除空白，开始一段神奇的旅程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

你可以这样做，就像我通常做的那样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>

<li>
Item 1
</li>

<li>
Item 2
</li>

<li>
Item 3
</li>

</ul>

http://jsfidle.net/thirtydot/dghfv/1362/
或者，这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>

<li>
Item 1</li
>
<li>
Item 2</li
>
<li>
Item 3
</li>

</ul>
或者，使用注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>

<li>
Item 1
</li>

<li>
Item 2
</li>

<li>
Item 3
</li>

</ul>
或者，如果您使用的是PHP或类似软件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>

<li>
Item 1
</li>
<?
?>
<li>
Item 2
</li>
<?
?>
<li>
Item 3
</li>

</ul>
或者，您甚至可以完全跳过某些结束标记(所有浏览器都可以这样做)：

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>

<li>
Item 1

<li>
Item 2

<li>
Item 3

</ul>

既然我已经走了，用"一千种不同的方法在30点前消除空白"，让你烦死了，希望你已经忘记了关于font-size: 0的一切。

或者，您现在可以使用flexbox来实现以前可能使用的内联块的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关讨论

它在FF3.6、IE9RC、O11、CH9中工作。然而，在Safari 5中，仍然存在1倍宽的间隙:(
这真的很奇怪(而且很不幸)，我本以为Chrome和Safari会有同样的表现。
是的，看起来我得用一些修复方法来进行狩猎——例如，这个：span + span { margin-left:-1px; }。
字体大小为零在大多数浏览器中对我来说都很好。仍然遇到与Safari相同的问题。脸上真的很难过
@你能看看这个答案的评论吗？这可能是因为这个江户的把戏毕竟不是个好主意……
@？输入视频：webmasters.stackexchange.com/q/17655/9316
我知道海报正在寻找一个CSS解决方案，但是这个解决方案——到目前为止投票最多的解决方案(我写这篇文章时是30票对5票)——有很强的副作用，甚至不能跨浏览器工作。在这一点上，更实际的做法是简单地删除HTML中有问题的空白。
@斯蒂芬·蒂里翁：告诉我这件事："老实说，我总是去掉空白……"老实说，我应该把这个答案编辑得更像那个答案。
如果您想使用像素以外的任何字体大小单位，这是一个非常糟糕的方法。将字体大小设置为0将无法在子元素中使用em或百分比。上面提到的雅虎网格方法是一种更安全的解决方案，副作用也更少。
此解决方案仅在您的集装箱尺寸不使用EMS时有效。
对我来说非常有效，我唯一要做的就是为所有子元素重置字体大小：.parent * { font-size: 14px; }。
这是我目前的工作方法，但是把font-size放在0上确实让我汗流浃背。到目前为止，这个问题似乎还没有彻底解决。
这将用相对的字体大小分隔子元素。
尝试字母间距：0=))
这不是字体大小不能从父级继承的大问题吗？另外，如果另一个设计师进来，在容器中添加另一个区域，而文本没有显示出来，那么很难找到bug。
@运动能力：我不会称之为"大问题"，更多的是偶尔的烦恼。一个称职的设计师不需要很长时间就可以弄清楚为什么font-size: 0的文本没有显示出来，特别是在使用浏览器检查工具的情况下。
我考虑过编辑来添加这个，但我不完全确定是否值得这样做；但是可以使用相对的font-size来覆盖font-size: 0祖先，使用rem、vh、vw或vmin/vmax(其中rem可能是更好的选择，具体取决于关于兼容性)。
当元素包含示例文本(如foo bar)时，删除HTML中的空白是一种实用的解决方案，但当您试图构建复杂布局结构的骨架时，就不需要这么多了。虽然我想知道是否有一个对或"强制空间"代码的反命令可以做完全相反的事情，并删除没有在源代码中显式添加但由于HTML的语法规则而假定的空白。有人知道这样的解决方案吗？
@相反，我通过一个名为php的超文本处理器来完成所有的HTML输出，这有助于我将复杂的大布局结构拆分成许多看起来像"foo bar"的小代码…除此之外，我只是练习阅读内联HTML，一旦开始阅读，就不难了。HTML是一种糟糕的下载语言，所以我的首要任务是选择一种不依赖于整洁语法和格式的方式来编写它。我来这里的唯一原因是通过与我不能选择他们如何写它的网站合作。
省略EDOCX1[0]的关闭本身并不能解决问题，因为空白仍然存在，尽管它现在是EDOCX1[1]内容的一部分，而不是ul的一部分。
@戈莱兹特洛尔：据我所知，它确实解决了这个问题。空白确实在li中移动，但也不会呈现空白(除非您有white-space: pre或类似的空白)。你能给我举个例子吗？
对。原因是出于好奇，当我将这个问题作为副本关闭时，我尝试了那个解决方案(jsiddle)。不过，这是一个特例。OP正在呈现::after内容，该内容后面有一个空间，使用此解决方案，它在额外内容前面有一个空间。但我现在意识到这就是原因。由于额外的内容，空间不再被修剪。
对这个答案的看法是如此复杂。我喜欢简单的从标签中删除空白。它工作，简单，跨浏览器。灿烂的。但是，有些东西感觉非常根本的错误，以至于标记的布局修复了一个问题。
@克里斯托弗劳尼斯：这确实感觉不对。但不幸的是，在大多数情况下，这是最简单的解决方案。但是，现在您可以经常使用flexbox而不是display: inline-block来实现类似的布局。
我建议在将文件上载到本地测试服务器之前运行一个脚本来删除空白(并在上载到远程服务器之前缩小空白)。无差异或妥协。
每个批评这个答案不完美的人都需要记住，在(水平)块布局中使用内联块是他们开始时的第一个错误。当然，这些解决方案会很糟糕，当然，它们不会在任何情况下都起作用——当您为某个从来没有打算使用的东西使用内联块时，要么是您使用它的错误，要么是CSS当时没有提供任何好的替代方案的错误，但不是这个回答者的错误，他们的解决方案并不理想。
@克里斯托弗·阿伦·刘易斯：这是因为问题的前提(不是这个答案)从根本上来说是错误的。内联布局的整个要点是让空白区做它最擅长的事情：单独的单词，或者在本例中是原子内联。将空白区视为需要从使用内联块的布局中移除的问题，而不是将其视为功能，就像将浮动区周围的文字环绕视为一个问题(当它是整个浮动点时)。即使如此，由于两者都不充分，浮动至少比实际上是块布局的内联块具有优势。

对于符合CSS3的浏览器，有white-space-collapsing:discard。

参见：http://www.w3.org/tr/2010/wd-css3-text-20101005/空白折叠

相关讨论

好吧，尽管我已经否决了font-size: 0;和not implemented CSS3 feature的答案，在尝试之后，我发现它们都不是真正的解决方案。

实际上，没有一个没有强烈副作用的解决方案。

然后我决定从我的HTML源(JSP)中删除inline-block个div之间的空格(这个答案是关于这个论点的)。转向：

1
2
3
4

I'm an inline-block div

I'm an inline-block div

对此

1
2
3

I'm an inline-block div

I'm an inline-block div

这很难看，但很有效。

但是，等一下…如果我在Taglibs loops里(Struts2和JSTL等)制造潜水器呢？

例如：

1
2
3
4
5
6
7
8
9
10
11

<s:iterator begin="0" end="6" status="ctrDay">
 
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">

I'm an inline-block div in a matrix
(Do something here with the pushed object...)

</s:push>
</s:iterator>
</s:iterator>

把这些东西放在一行是绝对不可能的，这意味着

那是不可读的，难以理解的，等等…

我发现的解决方案是：

use HTML comments to connect the end of one div to the begin of the next one!

1
2
3
4
5
6
7
8
9
10
11

<s:iterator begin="0" end="6" status="ctrDay">
 
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</s:push></s:iterator>
</s:iterator>

这样，您将拥有一个可读且正确缩进的代码。

而且，作为一个积极的副作用，HTML source虽然充斥着空洞的评论，将导致正确的缩进；

让我们举第一个例子。在我看来，这是：

1
2
3
4

I'm an inline-block div

I'm an inline-block div

比这更好：

1
2
3

I'm an inline-block div

I'm an inline-block div

相关讨论

在元素之间添加注释以不留空格。对我来说，这比将字体大小重置为零然后重新设置要容易得多。

1
2
3
4

Element 1

Element 2

display:inline-block的所有空间消除技术都是令人讨厌的黑客…

使用柔性箱

它非常棒，解决了所有这些内联块布局的问题，截至2017年，它有98%的浏览器支持(如果你不关心旧的IES的话，更多的支持)。

我们准备好使用flexbox了吗？
使用CSS flexible box-Web Developer Guide MDN
flexbox css技巧完整指南
flexy box-css flexbox playground和代码生成工具

相关讨论

这与我在相关部分给出的答案相同：display:inline block-那是什么空间？

实际上，有一种非常简单的方法可以从内联块中删除空白，既简单又具有语义性。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空白(由浏览器为单独行上的内嵌元素添加)。一旦您声明了字体，您只需更改容器上的font-family，然后再次更改子容器上的font-family，就可以了。这样地：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@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中创建并用fontsquirrelWebFONT生成器转换的字体。我花了5分钟。css @font-face声明包括：压缩的零宽度空格字体。它在Google Drive中，所以您需要单击文件>下载将其保存到您的计算机。如果您将声明复制到主CSS文件中，可能还需要更改字体路径。

相关讨论

将display: flex;添加到父元素。以下是带前缀的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}

1
2
3
4
5
6

Foo 
 Bar

更新

简化版？？

1
2
3
4
5
6
7
8
9
10
11

p {
display: flex;
}

span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}

1
2
3
4
5
6

Foo 
 Bar

基于CSS文本模块级别3的另外两个选项(而不是从规范草案中删除的white-space-collapsing:discard)：

word-spacing: -100%;

从理论上讲，它应该做所需的——缩短空白区在"单词"之间加上空格字符宽度的100%，即零。但似乎在任何地方都不起作用，不幸的是，这功能标记为"有风险"(也可以从规范中删除)。

word-spacing: -1ch;

它将字间距缩短为数字"0"的宽度。在单空间字体中，它应该完全等于空格字符(以及任何其他字符)的宽度。它适用于Firefox 10+、Chrome 27+，几乎适用于Internet Explorer 9+。

小提琴

相关讨论

不幸的是，现在是2019年，white-space-collapse仍未实施。

同时，给父元素font-size: 0;，在子元素上设置font-size。这应该会起作用的

使用flexbox并对旧浏览器执行回退(根据上面的建议)：

1
2
3
4
5
6
7

ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

字体大小：0；管理起来可能有点棘手…

我认为以下几行比任何其他方法都好得多，更可重用，并且节省时间。我个人使用：

1
2
3
4
5
6
7
8

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

然后你可以使用它如下…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

据我所知(我可能错了)，但所有浏览器都支持这种方法。

说明：

这是可行的(也许-3px可能更好)，正如你预期的那样。

复制并粘贴代码(一次)
然后在HTML上，只需在每个内联块的父级上使用class="items"。

您将不需要返回到CSS，并为新的内联块添加另一个CSS规则。

同时解决两个问题。

还要注意>(大于符号)，这意味着*/所有子级都应该是内联块。

http://jsfiddle.net/fd5u3/

注意：当包装器有子包装器时，我已经修改了以适应继承字母间距。

相关讨论

不过，从技术上讲，这并不是问题的答案："如何删除内联块元素之间的空间？"

您可以尝试使用flexbox解决方案并应用下面的代码，空间将被删除。

1
2
3
4

p {
display: flex;
flex-direction: row;
}

您可以通过以下链接了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关讨论

简单的：

1
2
3
4

item {
display: inline-block;
margin-right: -0.25em;
}

不需要触摸父元素。

此处唯一的条件是：不能定义项的字体大小(必须等于父项的字体大小)。

0.25em是默认的word-spacing。

W3Schools-字间距属性

一般来说，我们在不同的行中使用类似的元素，但在display:inline-block的情况下，在同一行中使用标记将删除空间，但在不同的行中不会。

标签位于不同行的示例：

1
2
3
4

p span {
display: inline-block;
background: red;
}

1
2
3
4
5
6

Foo 
 Bar

标签在同一行中的示例

1
2
3
4

p span {
display: inline-block;
background: red;
}

1
2
3
4
5

Foo Bar

另一种有效的方法是CSS作业，它使用font-size:0给父元素，并尽可能多地给子元素font-size。

1
2
3
4
5
6
7
8

p {
font-size: 0;
}
p span {
display: inline-block;
background: red;
font-size: 14px;
}

1
2
3
4
5
6

Foo 
 Bar

The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.

相关讨论

我现在有这个问题，从font-size:0;我发现在Internet Explorer 7中，问题仍然存在，因为Internet Explorer认为"字体大小为0"？？？？你疯了吗？-所以，在我的例子中，我重新设置了Eric Meyer的CSS，并且使用font-size:0.01em;，我从Internet Explorer 7到Firefox 9有1个像素的差异，所以我认为这是一个解决方案。

我不太确定您是想制作两个没有间隙的蓝色跨度，还是想处理其他空白，但如果您想消除间隙：

1
2
3
4
5
6
7
8
9
10

span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;

float: left;
}

完成了。

我最近一直在解决这个问题，没有将父容器font-size:0设置为一个合理的值，而是将父容器letter-spacing:-.25em，然后将子容器设置为letter-spacing:normal，得到了一致的结果。

在另一个线程中，我看到一个评论提到，font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，完全否定了将字体大小设置为零的可能性。

不管指定的字体大小是100%、15pt还是36px，使用ems似乎都可以工作。

http://cdpn.io/dkijo

相关讨论

1
2
3
4
5
6

hello 
 world

相关讨论

我认为有一个非常简单/古老的方法可以实现这一点，即使是IE 6/7，所有浏览器都支持这种方法。我们可以简单地在父元素中将letter-spacing设置为大负值，然后在子元素将其设置回normal：

1
2
3
4
5

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Wrong (default spacing):


Item-1
Item-2
Item-3

<hr/>

Correct (no-spacing):


Item-1
Item-2
Item-3

相关讨论

使用PHP括号：

1
2
3

ul li {
display: inline-block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<ul>

<li>

first

</li>
<?
?>
<li>

first

</li>
<?
?>
<li>

first

</li>

</ul>

这个问题最简单的答案是补充。

CSS

1	float: left;

codepen链接：http://jsfidle.net/dghfv/3560/

相关讨论

我将对user5609829的答案进行一点扩展，因为我相信这里的其他解决方案太复杂/工作太多。将margin-right: -4px应用于内联块元素将消除间距，并且所有浏览器都支持它。在这里查看更新的小提琴。对于那些使用负空白的人，试着读一下。

相关讨论

将white-space: nowrap添加到容器元素：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12

* {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}

HTML：

1 2	Some stuff Some other stuff

这是抢劫犯。

CSS文本模块级别4规范定义了一个text-space-collapse属性，该属性允许控制如何处理元素内部和周围的空白。

因此，对于您的示例，您只需编写以下内容：

1
2
3

p {
text-space-collapse: discard;
}

不幸的是，还没有任何浏览器(截至2016年9月)实现HBP答案评论中提到的这一属性。

我尝试过用font-size: 0解决React和Sass中的类似问题，这是我目前正在进行的一个免费代码阵营项目。

它工作！

首先，脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

然后，Sass：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

html, body
height: 100%

body
height: 100%
margin: 0
padding: 0

#mainDiv
width: 80%
height: 60%
margin: auto
padding-top: 5px
padding-bottom: 5px
background-color: DeepSkyBlue
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px

#buttonsDiv
width: 80%
height: 60%
margin: auto
margin-bottom: 0px
padding-top: 5px
padding-bottom: 0px
background-color: grey
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px

#applicationGrid
width: 65%
height: 50%
padding-top: 0px
margin: auto
font-size: 0
margin-top: 0px
padding-bottom: 5px
background-color: white
text-align: center
border: 2px solid #381F0B
border-radius: 4px
margin-top: 20px

#actionBox
width: 20px
height: 20PX
padding-top: 0px
display: inline-block
margin-top: 0px
padding-bottom: 0px
background-color: lightgrey
text-align: center
border: 2px solid grey
margin-bottom: 0px

只是为了好玩：一个简单的javascript解决方案。

1
2
3
4
5
6
7
8
9

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
element.childNodes.forEach(check, element);
}

function check(item) {
if (item.nodeType === 3) this.removeChild(item);
}

1
2
3
4
5

span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}

1
2
3
4
5

Foo 
 Bar

有很多解决方案，比如font-size:0、word-spacing、margin-left、letter-spacing等等。

通常我更喜欢使用letter-spacing，因为

当我们指定一个大于额外空间宽度的值(例如，-1em)时似乎是可以的。

但是，当我们像-1em那样设置更大的值时，它不适用于word-spacing和margin-left。

当我们试图用em作为font-size单元时，使用font-size并不方便。

因此，letter-spacing似乎是最佳选择。

不过，我得警告你

使用letter-spacing时，最好使用-0.3em或-0.31em而不是其他。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
cursor: auto;
}
.nav {
width: 260px;
height: 100px;
background-color: pink;
color: white;
font-size: 20px;
letter-spacing: -1em;
}
.nav__text {
width: 90px;
height: 40px;
box-sizing: border-box;
border: 1px solid black;
line-height: 40px;
background-color: yellowgreen;
text-align: center;
display: inline-block;
letter-spacing: normal;
}

1
2
3
4
5

如果您使用的是Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99)，您可能会看到：

enter image description here

如果您使用的是火狐(60.0.2)、IE10或EDGE，您可能会看到：

enter image description here

这很有趣。所以，我检查了MDN字母间距，发现了：

length

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

似乎这就是原因。

在父级pcss上添加letter-spacing:-4px;，在spancss上添加letter-spacing:0px;。

1
2
3
4
5
6
7
8
9
10
11

span {
display:inline-block;
width:100px;
background-color:palevioletred;
vertical-align:bottom;
letter-spacing:0px;
}

p {
letter-spacing:-4px;
}

1
2
3
4
5
6

Foo 
 Bar

1
2
3
4
5
6
7
8

[cc lang="css"]span {
display:inline-block;
width:50px;
background:blue;
font-size:30px;
color:white;
text-align:center;
}

1
2
3

FooBar

< /代码>

我发现的另一种方法是将左边距应用为负值，但行的第一个元素除外。

1
2
3
4
5
6
7
8
9
10
11
12

span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}

在我看来，每一个试图消除inline-blocks之间空间的问题都像是

s……

尝试如下操作：

1
2
3
4
5
6
7
8

p {
display: table;
}
span {
width: 100px;
border: 1px solid silver; /* added for visualization only*/
display: table-cell;
}

1
2
3
4
5
6

Foo 
 Bar

使用这些技巧之一

删除空格

负余量

跳过结束标记(HTML5无论如何都不关心)

将字体大小设置为零(字体大小为零的空间是…零宽度)

使用柔性箱

请参见下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

body {
font-family: sans-serif;
font-size: 16px;
}

ul {
list-style: none
}

li {
background: #000;
display: inline-block;
padding: 4px;
color: #fff;
}

ul.white-space-fix li {
margin-right: -4px;
}

ul.zero-size {
font-size: 0px;
}

ul.zero-size li {
font-size: 16px;
}

ul.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

我发现一个纯粹的CSS解决方案在所有浏览器中都非常适合我：

1
2
3

span {
display: table-cell;
}

相关讨论

从内联块元素中删除空格。有许多方法：

负余量

1
2
3
4

div a {
display: inline - block;
margin - right: -4 px;
}

字体大小为零

1
2
3
4
5
6

nav {
font - size: 0;
}
nav a {
font - size: 16 px;
}

跳过结束标记

1
2
3
4
5

< ul >
< li > one
< li > two
< li > three
< /ul>

相关讨论

在CSS中有一个简单的解决方案。例如：

HTML

1
2
3
4
5

Foo 
 Bar

CSS

1
2
3
4
5
6
7
8
9
10
11
12

.parent {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;
}
.children {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}

在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。

您可以在这个链接pureCSS中检查这个框架。享受：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.row {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;

/* For better view */
background: #f9f9f9;
padding: 1em .5em;
}

.col {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;

/* For better view */
padding: 16px;
background: #dbdbdb;
border: 3px #bdbdbd solid;
box-sizing: border-box;
width: 25%;
}

1
2
3
4

尝试此代码段：

1
2
3
4
5
6
7
8
9

span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
margin-right: -3px;
}

工作演示：http://jsfiddle.net/dghfv/2784/

所以有很多复杂的答案。我能想到的最简单的方法就是给其中一个元素一个负的边缘(根据元素的位置，要么是margin-left要么是margin-right)。