这些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。
当前回答
如果你正在使用Twig模板引擎，你可以使用无空格:
<p>
{% spaceless %}
<span>Foo</span>
<span>Bar</span>
{% endspaceless %}
</p>
请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。
其他回答
我发现的另一种方法是将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;
}
只是为了好玩:一个简单的JavaScript解决方案。
document.querySelectorAll (.container) .forEach(清晰); 函数clear(element) { element.childNodes。forEach(检查、元素); ｝ 功能检查(项){ 如果项目。nodeType === 3) this. removecchild (item); ｝ 跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; ｝ < p class = "容器" > <span> Foo </span> <span> Bar </span> < / p >
我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。
另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):
词间距:-100%;
从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到 零。但不幸的是，似乎在任何地方都行不通，还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。
词间距:1 ch;
它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+， Chrome 27+，几乎适用于Internet Explorer 9+。
小提琴
试试这个片段:
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
margin-right: -3px;
}
工作演示:http://jsfiddle.net/dGHFV/2784/
