如何删除内联之间的空间
鉴于这个HTML和CSS：
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>由于这个答案已经变得相当流行，我正在重写它。
我们不要忘记被问到的实际问题：
如何去除内嵌块元素之间的空间？ 我希望有一个不需要HTML源代码被篡改的CSS解决方案。 这个问题可以用CSS来解决吗？
只用CSS就可以解决这个问题，但是没有完全可靠的CSS修复。
我在最初的答案中的解决方案是将font-size: 0添加到父元素，然后在子元素上声明合理的font-size 。
http://jsfiddle.net/thirtydot/dGHFV/1361/
这适用于所有现代浏览器的最新版本。 它在IE8中工作。 它在Safari 5中不起作用，但它在Safari 6中起作用.Safari 5几乎是一个死去的浏览器（2015年8月0.33％）。
相对字体大小的大多数可能的问题并不难解决。
然而，如果您特别需要CSS修正，这是一个合理的解决方案，但如果您可以自由更改HTML（如同我们大多数人一样），这不是我推荐的。
这就是我作为一个经验丰富的Web开发人员实际上可以解决这个问题的方法：
<p>
<span>Foo</span><span>Bar</span>
</p>
恩，那就对了。 我在内联块元素之间的HTML中删除空格。
这很容易。 这很简单。 它工作到处。 这是实用的解决方案。
你有时必须仔细考虑空白的来源。 用JavaScript添加另一个元素会添加空白吗？ 不，如果你做得对的话。
让我们继续以不同的方式去除空白的魔法旅程，并使用一些新的HTML：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
你可以像我通常那样做到这一点：
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
或这个：
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
或者，使用评论：
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
或者，你甚至可以完全跳过某些结束标签（所有浏览器都可以）：
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
现在我已经厌倦了用“千种不同的方式来删除空白，由thirtydot”，你死了，希望你已经忘记了所有关于font-size: 0 。
或者，您现在可以使用flexbox来实现以前用于内嵌块的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
对于符合CSS3的浏览器，有white-space-collapsing:discard
请参阅：http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
好吧，虽然我已经upvoted的font-size: 0; 和not implemented CSS3 feature答案，尝试后，我发现他们都没有一个真正的解决方案 。
事实上，没有强大的副作用，甚至没有一种解决方法。
然后， 我决定从我的HTML源代码（ JSP ）中的inline-block 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>
这是丑陋的，但工作。
但是，等一下......如果我在Taglibs loops （ Struts2 ， JSTL等）中生成我的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>
这意味着将所有这些内容联系在一起是绝对不可想象的
<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 source虽然受空注释的影响，但会导致正确缩进;
让我们来看第一个例子，imho：
<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>
希望这有助于...
链接地址: http://www.djcxy.com/p/2565.html