试试这个片段:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;
    margin-right: -3px;
}

工作演示:http://jsfiddle.net/dGHFV/2784/

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

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

我不太确定你是否想要创建两个没有间隙的蓝色跨度，或者想要处理其他空白，但如果你想删除间隙:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

和完成。

另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):

词间距:-100%;

从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到 零。但不幸的是，似乎在任何地方都行不通，还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。

词间距:1 ch;

它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+， Chrome 27+，几乎适用于Internet Explorer 9+。

小提琴

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

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

字体大小: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/

注意:我已经进行了修改，以适应当包装器有子包装器时继承字母间距。