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


当前回答

简单:

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

不需要触及父元素。

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

0.25em是默认的字间距

W3Schools -字间距属性

其他回答

不过,严格来说,这并不是问题的答案: “如何删除内联块元素之间的空格?”

您可以尝试flexbox解决方案并应用下面的代码,空格将被删除。

p {
   display: flex;
   flex-direction: row;
}

你可以在这个链接上了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我将稍微扩展一下user5609829的答案,因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用margin-right: -4px将删除空格,所有浏览器都支持。在这里查看更新的小提琴。对于那些担心使用负边距的人,试着阅读一下这篇文章。

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在,因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以,在我的情况下,我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异,所以,我认为这是一个解决方案。

我想我应该在这个问题上添加一些新的东西,尽管目前提供的许多答案都是足够的和相关的,有一些新的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 >

试试这个片段:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;
    margin-right: -3px;
}

工作演示:http://jsfiddle.net/dGHFV/2784/