这些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。
当前回答
对于符合CSS3的浏览器，有空白崩溃:丢弃
见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing
其他回答
每个问题，试图删除内联块之间的空间似乎像一个<table>给我…
试试这样做:
p { 显示:表; ｝ 跨度{ 宽度:100 px; 边框:1px实心银;/*仅用于可视化*/ 显示:表格单元; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
通常我们在不同的行中使用这样的元素，但在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 >
上述方法可能在某些地方不起作用，这取决于整个应用程序，但最后一种方法是这种情况的万无一失的解决方案，可以在任何地方使用。
我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。
我将稍微扩展一下user5609829的答案，因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用margin-right: -4px将删除空格，所有浏览器都支持。在这里查看更新的小提琴。对于那些担心使用负边距的人，试着阅读一下这篇文章。
对于符合CSS3的浏览器，有空白崩溃:丢弃
见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing
