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

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; } < p > <span> Foo </span> <span> Bar </span> < / p >

小提琴演示

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

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

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

修改HTML。 JavaScript。


当前回答

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

使用Flexbox

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

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

其他回答

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

span {
    display: table-cell;
}

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

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

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

http://cdpn.io/dKIjo

从内联块元素中移除空格,有很多方法:

字体大小为0 nav { 字体大小:0; } 导航a { 字体大小:16 px; } 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; } 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >

消极的保证金

你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然,这在旧的IE(6和7)中是有问题的,但如果你不关心这些浏览器,至少你可以保持代码格式干净。

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

每个问题,试图删除内联块之间的空间似乎像一个<table>给我…

试试这样做:

p { 显示:表; } 跨度{ 宽度:100 px; 边框:1px实心银;/*仅用于可视化*/ 显示:表格单元; } < p > <span> Foo </span> <span> Bar </span> < / p >