这些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。
当前回答
跨度{ 显示:inline-block; 宽度:50 px; 背景:蓝色; 字体大小:30 px; 颜色:白色; text-align:中心; ｝ < p > < span > Foo < / span > < span >栏< / span > < / p >
其他回答
为什么不像这样……有点粗糙，取决于你的CSS单元代码，但是:
.my-span {
position: relative;
left: -1em;
width: 1em;
}
<span>...</span><span class="my-span"></span>
我最近一直在解决这个问题，而不是设置父字体大小:0，然后将子设置回一个合理的值，我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。
在另一个帖子中，我看到一位评论者提到，font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，完全否定了将字体大小设置为0的可能性。
无论指定的字体大小是100%、15pt还是36px，使用ems都可以正常工作。
http://cdpn.io/dKIjo
使用flexbox，并为旧浏览器做一个回退(从上面的建议):
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
我发现的另一种方法是将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;
}
我认为有一个非常简单/古老的方法，所有浏览器都支持，甚至是IE 6/7。我们可以简单地在父元素中将字母间距设置为一个较大的负值，然后在子元素中将其设置为正常值:
body { font-size: 24px } span { border: 1px solid #b0b0c0; } /* show borders to see spacing */ .no-spacing { letter-spacing: -1em; } /* could be a large negative value */ .no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */ <p style="color:red">Wrong (default spacing):</p> <div class=""> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="no-spacing"> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div>
