这些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。
当前回答
在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
其他回答
所有用于显示的空间消除技术:内联块是讨厌的hack…
使用Flexbox
它很棒，解决了所有的内联块布局问题，截至2017年有98%的浏览器支持(如果你不关心旧的ie，更多)。
我们准备好使用Flexbox了吗? 使用CSS灵活的盒子- Web开发人员指南| MDN Flexbox | CSS-Tricks的完整指南 Flexy Boxes - CSS flexbox游乐场和代码生成工具
通常我们在不同的行中使用这样的元素，但在display:在同一行中使用标签的内联块将删除空格，但在不同的行中则不会。
在不同的行中有标签的例子:
P跨度{ 显示:inline-block; 背景:红色; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
标签在同一行的示例
P跨度{ 显示:inline-block; 背景:红色; } < p > <span> Foo </span><span> Bar </span> < / p >
另一种有效的方法是CSS作业，对父元素使用font-size:0，并根据需要给子元素赋予font-size。
p { 字体大小:0; ｝ P跨度{ 显示:inline-block; 背景:红色; 字体大小:14 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
上述方法可能在某些地方不起作用，这取决于整个应用程序，但最后一种方法是这种情况的万无一失的解决方案，可以在任何地方使用。
2021的解决方案
不幸的是，空白折叠仍然没有实现。
同时，给父元素font-size: 0;然后设置子字体的字体大小。这应该能奏效
在container元素中添加white-space: nowrap:
CSS:
* {
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:
<div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
这是普伦克。
CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。
所以，关于你的例子，你只需要这样写:
p {
text-space-collapse: discard;
}
不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。
