这些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。
当前回答
我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:
span {
display: table-cell;
}
其他回答
我想我应该在这个问题上添加一些新的东西，尽管目前提供的许多答案都是足够的和相关的，有一些新的CSS属性可以实现非常干净的输出，在所有浏览器上完全支持，几乎没有“黑客”。这确实远离了内联块，但它给你的结果与问题要求的相同。
这些CSS属性是网格
CSS网格是高度支持的(CanIUse)，除了IE，它只需要一个-ms-前缀来允许它工作。
CSS Grid也是高度灵活的，它把表格、flex和内联块元素的所有好的部分都集中到一个地方。
创建网格时，可以指定行与列之间的间隔。默认间距已经设置为0px，但您可以将此值更改为任何您喜欢的值。
长话短说，这里有一个相关的工作示例:
身体{ 背景:lightblue; 字体类型:无衬线; ｝ .container { 显示:网格; Grid-template-columns: 100px; grid-column-gap: 0;/*不需要但有用，例如*/ grid-row-gap: 0;/*不需要但有用，例如*/ ｝ .box { 背景:红色; ｝ .box: nth-child(甚至){ 背景:绿色; ｝ < div class = "容器" > < div class = "盒子" > 你好 < / div > < div class = "盒子" > 测试 < / div > < / div >
使用PHP括号:
申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>
消极的保证金
你可以用负4px的边距将元素移回原位(可能需要根据父字体大小进行调整)。显然，这在旧的IE(6和7)中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。
span {
display: inline-block;
margin-right: -4px;
}
我最近一直在解决这个问题，而不是设置父字体大小:0，然后将子设置回一个合理的值，我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。
在另一个帖子中，我看到一位评论者提到，font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，完全否定了将字体大小设置为0的可能性。
无论指定的字体大小是100%、15pt还是36px，使用ems都可以正常工作。
http://cdpn.io/dKIjo
只是为了好玩:一个简单的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 >
