这些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。
当前回答
使用flexbox，并为旧浏览器做一个回退(从上面的建议):
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
其他回答
对于符合CSS3的浏览器，有空白崩溃:丢弃
见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing
每个问题，试图删除内联块之间的空间似乎像一个<table>给我…
试试这样做:
p { 显示:表; ｝ 跨度{ 宽度:100 px; 边框:1px实心银;/*仅用于可视化*/ 显示:表格单元; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
简单:
item {
display: inline-block;
margin-right: -0.25em;
}
不需要触及父元素。
这里唯一的条件是:项目的font-size必须没有定义(必须等于父项的font-size)。
0.25em是默认的字间距
W3Schools -字间距属性
消极的保证金
你可以用负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;
float: left;
}
和完成。
