如何删除内联/内联块元素之间的空间?

这些span元素之间将有一个4像素宽的空间:

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ Foo Bar

小提琴演示

我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:

<p>
  <span> Foo </span><span> Bar </span>
</p>

我正在寻找一个CSS解决方案，不涉及:

修改HTML。 JavaScript。

当前回答

2021的解决方案

不幸的是，空白折叠仍然没有实现。

同时，给父元素font-size: 0;然后设置子字体的字体大小。这应该能奏效

其他回答

我最近一直在解决这个问题，而不是设置父字体大小:0，然后将子设置回一个合理的值，我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。

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

无论指定的字体大小是100%、15pt还是36px，使用ems都可以正常工作。

http://cdpn.io/dKIjo

所有用于显示的空间消除技术:内联块是讨厌的hack…

使用Flexbox

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

我们准备好使用Flexbox了吗? 使用CSS灵活的盒子- Web开发人员指南| MDN Flexbox | CSS-Tricks的完整指南 Flexy Boxes - CSS flexbox游乐场和代码生成工具

我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:

span {
    display: table-cell;
}

简单:

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

不需要触及父元素。

这里唯一的条件是:项目的font-size必须没有定义(必须等于父项的font-size)。

0.25em是默认的字间距

W3Schools -字间距属性

另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):

词间距:-100%;

从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到零。但不幸的是，似乎在任何地方都行不通，还有这个特性被标记为“处于危险中”(它也可以从规范中删除)。

词间距:1 ch;

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

小提琴

推荐文章