如何删除inline-block元素之间的空间？ [英] How to remove the space between inline-block elements?
问题描述
已给定此HTML：
<p>
<span> Foo </span>
<span> Bar </span>
</p>
和此CSS：
span {
display:inline-block;
width:100px;
}
结果，SPAN元素之间将有一个4像素宽的空间。
演示： http://jsfiddle.net/dGHFV/
as a result, there will be a 4px wide space between the SPAN elements.
Demo: http://jsfiddle.net/dGHFV/
我明白为什么会发生这种情况，我也知道我可以通过删除HTML源代码中的SPAN元素之间的白色空间来摆脱这个空间，如下所示： / p>
I understand why this happens, and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code, like so:
<p>
<span> Foo </span><span> Bar </span>
</p>
但是，我希望一个CSS解决方案不需要HTML源代码被篡改与
However, I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with.
我知道如何使用JavaScript来解决这个问题 - 通过从容器元素（段落）中删除Text节点，如下所示：
I know how to solve this with JavaScript - by removing the Text nodes from the container element (the paragraph), like so:
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
演示： http://jsfiddle.net/dGHFV/1/
但是这个问题可以用CSS单独解决吗？ p>
But can this issue be solved with CSS alone?
推荐答案
由于这个答案已经相当受欢迎，我将重写它。
Since this answer has become rather popular, I'm rewriting it significantly.
让我们不要忘记所问的实际问题：
Let's not forget the actual question that was asked:
如何删除inline-block元素之间的空格？我希望
的CSS解决方案，不要求HTML源代码是
篡改。 这个问题是否可以单独使用CSS解决？
解决这个问题与CSS单独，但没有完全强大的CSS修复。
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
我在我的初始答案中的解决方案是添加 font-size：0 到父元素，然后在子元素上声明一个合理的 font-size 。
The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
这适用于所有现代浏览器的最新版本。它在IE8中工作。它在Safari 5中不起作用，但在 下工作。Safari 5几乎是一个死机的浏览器（ 0.33％，2015年8月）。
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
相对字体大小的大多数可能的问题并不复杂。
Most of the possible issues with relative font sizes are not complicated to fix.
但是，虽然这是一个合理的解决方案，如果你特别需要 CSS只修复，这不是我推荐，如果你是免费的
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
这是我作为一个有经验的网络开发人员，实际上是为了解决这个问题：
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
是的，没错。我删除了inline-block元素之间的HTML中的空格。
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
很容易。这很简单。它无处不在。这是务实的解决方案。
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
你有时必须仔细考虑空格将从何而来。
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with jQuery add whitespace? No, not if you do it properly.
让我们继续使用不同的方式来进行一个神奇的旅程删除空格，并添加一些新的HTML：
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
-
你可以这样做， / p>
You can do this, as I usually do:
<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>-
或者使用注释：
Or, use comments:
<ul> <li>Item 1</li><!-- --><li>Item 2</li><!-- --><li>Item 3</li> </ul>Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul>
以一千种不同的方式来删除空格，三十点，希望你已经忘记了 font-size：0 。
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.
这篇关于如何删除inline-block元素之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
