这些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。
当前回答
我最近一直在解决这个问题，而不是设置父字体大小:0，然后将子设置回一个合理的值，我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。
在另一个帖子中，我看到一位评论者提到，font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，完全否定了将字体大小设置为0的可能性。
无论指定的字体大小是100%、15pt还是36px，使用ems都可以正常工作。
http://cdpn.io/dKIjo
其他回答
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
只是为了好玩:一个简单的JavaScript解决方案。
document.querySelectorAll (.container) .forEach(清晰); 函数clear(element) { element.childNodes。forEach(检查、元素); ｝ 功能检查(项){ 如果项目。nodeType === 3) this. removecchild (item); ｝ 跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p class = "容器" > <span> Foo </span> <span> Bar </span> < / p >
如果你正在使用Twig模板引擎，你可以使用无空格:
<p>
{% spaceless %}
<span>Foo</span>
<span>Bar</span>
{% endspaceless %}
</p>
请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。
CSS Text Module Level 4规范定义了一个Text -space-collapse属性，它允许控制元素内部和周围的空白如何处理。
所以，关于你的例子，你只需要这样写:
p {
text-space-collapse: discard;
}
不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。
我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:
span {
display: table-cell;
}
