如何去除内嵌块元素之间的空间？ [英] How do I remove the space between inline-block elements?
问题描述
给出这个HTML和CSS：
span {display：inline-块;宽度：100像素;背景颜色：palevioletred;}
< p> <跨度> Foo< / span> <跨度>酒吧< / span>< / p>
结果，SPAN元素之间将会有一个4像素宽的空间。
演示： http://jsfiddle.net/dGHFV/
我明白为什么会发生这种情况，而且我也知道我可以通过消除HTML源代码中SPAN元素之间的空白来摆脱这种空间，如下所示：
< p为H.
< span> Foo< / span>< span>酒吧< / span>
< / p>
然而，我希望有一个不需要HTML源代码被篡改的CSS解决方案
我知道如何通过JavaScript解决这个问题 - 通过从容器元素（段落）中删除文本节点，如下所示：
// jQuery
$（'p'）。contents（）。filter（function（）{return this .nodeType === 3;}）。remove（）;
演示： http://jsfiddle.net/dGHFV/1/
但这个问题可以用因为这个答案已经变得相当流行，所以我重写了它。
$ b $是单独的吗？让我们不要忘记实际问题：
如何删除内联 - 块元素？我希望
是一个CSS解决方案，它不需要HTML源代码被
篡改。 这个问题是否可以通过CSS解决？
它 可以只用CSS来解决这个问题，但是没有完全可靠的CSS修正。
我在最初的答案中的解决方案是添加 font-size：0 添加到父元素，然后在子元素上声明一个合理的 font-size 。
http://jsfiddle.net/thirtydot/dGHFV/ 1361 /
这适用于所有现代浏览器的最新版本。它在IE8中工作。它在Safari 5中不起作用，但它在Safari 6中可以正常工作。Safari 5几乎是一个死的浏览器（ 0.33％，2015年8月）。
相对字体大小并不复杂。
然而，如果您特别需要仅CSS修补程序，这是一个合理的解决方案，但这不是我推荐的如果你可以自由改变你的HTML（就像我们大多数人一样）。
这就是我合理经验的网页开发人员，实际上可以解决这个问题：
< p>
< span> Foo< / span>< span>栏< / span>
< / p>
是的，没错。我在内嵌块元素之间的HTML中删除空格。
这很简单。这很简单。它工作到处。这是实用的解决方案。
您有时必须仔细考虑空白的来源。 使用JavaScript添加另一个元素会添加空白吗？不，如果您正确使用它，请执行此操作。 我们继续进行不同方式的神奇之旅用一些新的HTML删除空格：
< ul>
< li>第1项< / li>
< li>第2项< / li>
< li>第3项< / li>
< / ul>
-
您可以这样做，正如我通常所做的那样：
< ul>
< li>项目1< / li>< li>项目2< / li>< li>项目3< / li>
< / ul>
-
或者，这个：
< ul>
< li>项目1< / li
>< li>项目2< / li
>< li>项目3< / li>
< / ul>
-
或者使用评论：
< UL>
< li>项目1< / li><！ -
- >< li>项目2< / li><！ -
- > < li>第3项< / li>
< / ul>
-
或者你甚至可以跳过确定完全关闭标签（所有浏览器都可以正常使用）：
< ul>
< li>项目1
< li>项目2
< li>项目3
< / ul>
现在我已经厌倦了你用千种不同的方法删除空白，由thirtydot，希望你已经忘记了所有关于 font-size：0 。
或者，您现在可以使用flexbox 要实现许多您以前可能使用过的内嵌块的布局： https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Given this HTML and CSS:
span {
display:inline-block;
width:100px;
background-color:palevioletred;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
As a result, there will be a 4 pixel wide space between the SPAN elements.
Demo: http://jsfiddle.net/dGHFV/
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>
However, I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with.
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();
Demo: http://jsfiddle.net/dGHFV/1/
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:
How to remove the space between inline-block elements? I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
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/
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.
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>
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 JavaScript add whitespace? No, not if you do it properly.
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>
You can do this, as I usually do:
<ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ul>Or, this:
<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>
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.
Alternatively, you can now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这篇关于如何去除内嵌块元素之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
