给定这个 HTML 和 CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;}
<p>
<span> Foo </span>
<span> Bar </span></p>
因此,SPAN 元素之间将有4个像素宽的空间。
演示: http://jsfiddle.net/dGHFV/
我知道为什么会出现这种情况,我也知道可以通过删除 HTML 源代码中 SPAN 元素之间的空白来消除这种空白,如下所示:
<p>
<span> Foo </span><span> Bar </span></p>
然而,我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。
我知道如何用 JavaScript 来解决这个问题——通过从容器元素(段落)中移除文本节点,如下所示:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
演示: http://jsfiddle.net/dGHFV/1/
但是这个问题能单独用 CSS 解决吗?