如何删除inline/inline-block元素之间的空格？
考虑到这个HTML和CSS：
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>
因此，在SPAN元素之间将有4像素宽的空间。
演示： http://jsfiddle.net/dGHFV/
我理解为什么会发生这种情况，我也知道我可以通过删除HTML源代码中SPAN元素之间的空格来消除空格，如下所示：
<p>
<span> Foo </span><span> Bar </span>
</p>然而，我希望得到一种不需要篡改HTML源代码的CSS解决方案。
我知道如何使用JavaScript解决这个问题-通过从容器元素(段落)中删除文本节点，如下所示：
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();演示： http://jsfiddle.net/dGHFV/1/
但是这个问题能单独用CSS解决吗？
回答 38
Stack Overflow用户
发布于 2011-02-22 20:52:26
对于符合CSS3的浏览器，有white-space-collapsing:discard
请参阅：http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
Stack Overflow用户
发布于 2013-02-09 00:13:00
现在，我们应该只使用Flexbox。
老生常谈：
好吧，虽然我对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>这是不可读的，难以维护和理解等。
我找到的解决方案是：
使用超文本标记语言注释将一个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虽然充斥着空注释，但将导致正确的缩进；
让我们以第一个例子为例。以我的浅见，这是：
<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>Stack Overflow用户
发布于 2015-10-21 18:46:05
将display: flex;添加到父元素。以下是带有前缀的解决方案：
简化版本
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>
使用前缀进行修复
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>
https://stackoverflow.com/questions/5078239
复制相似问题