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


当前回答

p { 显示:flex; } 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; } < p > <span> hello </span> <span> world </span> < / p >

其他回答

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

在元素之间添加注释以避免出现空白。对我来说,这比将字体大小重置为零然后再设置回来要容易得多。

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

我发现的另一种方法是将margin-left作为除行第一个元素外的负值。

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

通常我们在不同的行中使用这样的元素,但在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 >

上述方法可能在某些地方不起作用,这取决于整个应用程序,但最后一种方法是这种情况的万无一失的解决方案,可以在任何地方使用。

我认为有一个非常简单/古老的方法,所有浏览器都支持,甚至是IE 6/7。我们可以简单地在父元素中将字母间距设置为一个较大的负值,然后在子元素中将其设置为正常值:

body { font-size: 24px } span { border: 1px solid #b0b0c0; } /* show borders to see spacing */ .no-spacing { letter-spacing: -1em; } /* could be a large negative value */ .no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */ <p style="color:red">Wrong (default spacing):</p> <div class=""> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="no-spacing"> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div>