这些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。


当前回答

我想我应该在这个问题上添加一些新的东西,尽管目前提供的许多答案都是足够的和相关的,有一些新的CSS属性可以实现非常干净的输出,在所有浏览器上完全支持,几乎没有“黑客”。这确实远离了内联块,但它给你的结果与问题要求的相同。

这些CSS属性是网格

CSS网格是高度支持的(CanIUse),除了IE,它只需要一个-ms-前缀来允许它工作。

CSS Grid也是高度灵活的,它把表格、flex和内联块元素的所有好的部分都集中到一个地方。

创建网格时,可以指定行与列之间的间隔。默认间距已经设置为0px,但您可以将此值更改为任何您喜欢的值。

长话短说,这里有一个相关的工作示例:

身体{ 背景:lightblue; 字体类型:无衬线; } .container { 显示:网格; Grid-template-columns: 100px; grid-column-gap: 0;/*不需要但有用,例如*/ grid-row-gap: 0;/*不需要但有用,例如*/ } .box { 背景:红色; } .box: nth-child(甚至){ 背景:绿色; } < div class = "容器" > < div class = "盒子" > 你好 < / div > < div class = "盒子" > 测试 < / div > < / div >

其他回答

这个问题最简单的答案是相加。

css

float: left;

代码依赖链接:http://jsfiddle.net/dGHFV/3560/

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

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

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

http://cdpn.io/dKIjo

CSS Text Module Level 4规范定义了一个Text -space-collapse属性,它允许控制元素内部和周围的空白如何处理。

所以,关于你的例子,你只需要这样写:

p {
  text-space-collapse: discard;
}

不幸的是,在HBP回答的评论中提到,目前还没有浏览器实现这个属性(截至2016年9月)。

跨度{ 显示:inline-block; 宽度:50 px; 背景:蓝色; 字体大小:30 px; 颜色:白色; text-align:中心; } < p > < span > Foo < / span > < span >栏< / span > < / p >

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

使用Flexbox

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

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