如何删除内联/内联块元素之间的空间? [英] How do I remove the space between inline/inline-block elements?
问题描述
给出以下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来解决吗?
由于此答案非常流行，因此我将对其进行大量重写.
我们不要忘记提出的实际问题:
如何删除内嵌块元素之间的空间?我希望 不需要HTML源代码的CSS解决方案 篡改. 可以仅使用CSS来解决此问题吗?
仅使用CSS即可解决此问题，但还没有完全健壮的CSS修复程序.
我最初的答案是将font-size: 0添加到父元素，然后在子元素上声明一个明智的font-size.
http://jsfiddle.net/thirtydot/dGHFV/1361/
这在所有现代浏览器的最新版本中均可使用.它可以在IE8中使用.它在Safari 5中不起作用，但在Safari 6中却起作用.Safari 5几乎是无效的浏览器( 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>
或者，如果您使用的是PHP或类似版本:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>
或者，您现在可以使用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, if you are using using PHP or similar:
<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屋！
