这些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。
当前回答
在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
其他回答
使用PHP括号:
申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>
今天，我们应该只使用Flexbox。
旧的回答:
好吧，尽管我已经投票赞成font-size: 0;和未实现的CSS3特性的答案， 经过尝试，我发现没有一个是真正的解决方案。
实际上，没有一种解决方法没有强烈的副作用。
然后我决定从我的HTML源代码(JSP)中删除内联块div之间的空格(这个答案是关于这个参数的)， 把这个:
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
这个
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
这很难看，但很管用。
但是，等一下……如果我生成我的div在Taglibs循环(Struts2, JSTL等…)?
例如:
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
这是绝对不可想象的内联所有的东西，这将意味着
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
这是不可读的，难以维护和理解，等等。
我找到的解决办法是:
使用HTML注释将一个div的结束连接到下一个div的开始!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock>
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
通过这种方式，您将获得可读且缩进正确的代码。
而且，作为一个积极的副作用，HTML源代码虽然充斥着空洞的注释， 将导致正确缩进;
我们来看第一个例子。在我看来，这一点:
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
比这个好:
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
简单:
item {
display: inline-block;
margin-right: -0.25em;
}
不需要触及父元素。
这里唯一的条件是:项目的font-size必须没有定义(必须等于父项的font-size)。
0.25em是默认的字间距
W3Schools -字间距属性
对于符合CSS3的浏览器，有空白崩溃:丢弃
见:http://www.w3.org/TR/2010/WD-css3-text-20101005/ white-space-collapsing
另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):
词间距:-100%;
从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到 零。但不幸的是，似乎在任何地方都行不通，还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。
词间距:1 ch;
它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+， Chrome 27+，几乎适用于Internet Explorer 9+。
小提琴
