这些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;管理起来可能有点棘手…
我认为下面的几行代码比其他任何方法都更好，更可重用，更节省时间。我个人使用这个:
.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
那么你可以这样使用它…
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
据我所知(我可能错了)，但所有浏览器都支持这个方法。
解释:
这工作(也许-3px可能更好)完全按照您的预期工作。
复制并粘贴代码(一次) 然后在HTML中，只需在每个内联块的父类上使用class="items"。
您将不需要回到css，并为您的新内联块添加另一个css规则。
同时解决两个问题。
还要注意>(大于号)，这意味着*/all子元素应该是内联块。
http://jsfiddle.net/fD5u3/
注意:我已经进行了修改，以适应当包装器有子包装器时继承字母间距。
其他回答
为什么不像这样……有点粗糙，取决于你的CSS单元代码，但是:
.my-span {
position: relative;
left: -1em;
width: 1em;
}
<span>...</span><span class="my-span"></span>
使用flexbox，并为旧浏览器做一个回退(从上面的建议):
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。
我最近一直在解决这个问题，而不是设置父字体大小:0，然后将子设置回一个合理的值，我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。
在另一个帖子中，我看到一位评论者提到，font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，完全否定了将字体大小设置为0的可能性。
无论指定的字体大小是100%、15pt还是36px，使用ems都可以正常工作。
http://cdpn.io/dKIjo
消极的保证金
你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然，这在旧的IE(6和7)中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。
span {
display: inline-block;
margin-right: -4px;
}
