这些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
其他回答
有很多解决方案，如字体大小:0，字间距，左距，字母间距等等。
通常我更喜欢使用字母间距，因为
当我们分配一个大于额外空间宽度的值时，这似乎是可以的。1 em)。 然而，当我们设置更大的值如-1em时，word-spacing和margin-left就不合适了。 当我们尝试使用em作为字体大小单位时，使用font-size并不方便。
所以，字母间距似乎是最好的选择。
但是，我必须警告你
当你使用字母间距时，最好使用-0.3em或-0.31em，而不是其他的。
* { margin: 0; padding: 0; } a { text-decoration: none; color: inherit; cursor: auto; } .nav { width: 260px; height: 100px; background-color: pink; color: white; font-size: 20px; letter-spacing: -1em; } .nav__text { width: 90px; height: 40px; box-sizing: border-box; border: 1px solid black; line-height: 40px; background-color: yellowgreen; text-align: center; display: inline-block; letter-spacing: normal; } <nav class="nav"> <span class="nav__text">nav1</span> <span class="nav__text">nav2</span> <span class="nav__text">nav3</span> </nav>
如果你正在使用Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99)，你看到的可能是:
如果你使用的是Firefox(60.0.2)、IE10或Edge，你看到的可能是:
这很有趣。所以，我检查了mdn-letter-spacing，发现了这个:
长度 指定除了默认字符间距之外的额外字符间距。值可能是负的，但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。
看来这就是原因。
在CSS中有一个简单的解决方案。例如:
HTML
<p class="parent">
<span class="children"> Foo </span>
<span class="children"> Bar </span>
</p>
CSS
.parent {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;
}
.children {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}
在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。
你可以在这个链接中检查这个框架。享受:)
.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>
如果你正在使用Twig模板引擎，你可以使用无空格:
<p>
{% spaceless %}
<span>Foo</span>
<span>Bar</span>
{% endspaceless %}
</p>
请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。
消极的保证金
你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然，这在旧的IE(6和7)中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。
span {
display: inline-block;
margin-right: -4px;
}
试试这个片段:
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
margin-right: -3px;
}
工作演示:http://jsfiddle.net/dGHFV/2784/
