这些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
其他回答
在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
添加字母间距:4 px;在父CSS上添加letter-spacing:0px;到生成空间css。
跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; vertical-align:底部; 字母间距:0 px; ｝ p { 字母间距:4 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
这个问题最简单的答案是相加。
css
float: left;
代码依赖链接:http://jsfiddle.net/dGHFV/3560/
我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。
