Html 如何删除内联/内联块元素之间的空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5078239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove the space between inline/inline-block elements?
提问by ?ime Vidas
Given this HTML and CSS:
鉴于此 HTML 和 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.
因此，SPAN 元素之间将有 4 像素宽的空间。
Demo:http://jsfiddle.net/dGHFV/
演示：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:
我明白为什么会发生这种情况，我也知道我可以通过删除 HTML 源代码中 SPAN 元素之间的空白来摆脱那个空间，如下所示：
<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.
但是，我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。
I know how to solve this with JavaScript - by removing the text nodes from the container element (the paragraph), like so:
我知道如何用 JavaScript 解决这个问题——通过从容器元素（段落）中删除文本节点，如下所示：
// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
Demo:http://jsfiddle.net/dGHFV/1/
演示：http : //jsfiddle.net/dGHFV/1/
But can this issue be solved with CSS alone?
但是这个问题可以单独用 CSS 解决吗？
采纳答案by thirtydot
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?
如何删除行内块元素之间的空间？我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。这个问题可以单独用 CSS 解决吗？
It ispossible to solve this problem with CSS alone, but there are no completelyrobust CSS fixes.
这是有可能解决这个问题单独CSS，但目前还没有完全强大的CSS修复。
The solution I had in my initial answer was to add font-size: 0to the parent element, and then declare a sensible font-sizeon the children.
我在最初的答案中的解决方案是添加font-size: 0到父元素，然后在子元素上声明一个 sensible font-size。
http://jsfiddle.net/thirtydot/dGHFV/1361/
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 doeswork in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5中不起作用，但在 Safari 6中起作用。Safari 5 几乎是一个死浏览器（0.33%，2015 年 8 月）。
Most of the possible issues with relative font sizes are not complicated to fix.
大多数与相对字体大小相关的可能问题并不难解决。
However, while this is a reasonable solution if you specifically needa CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
但是，虽然如果您特别需要仅修复 CSS ，这是一个合理的解决方案，但如果您可以随意更改 HTML（就像我们大多数人一样），这不是我推荐的。
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
这就是我，作为一个经验丰富的 Web 开发人员，实际上是为了解决这个问题：
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
恩，那就对了。我删除了内联块元素之间 HTML 中的空格。
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.
有时您确实必须仔细考虑空白的来源。使用 JavaScript 附加另一个元素会添加空格吗？不，如果你做得好，就不会。
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
让我们用一些新的 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 caneven skip certainclosing tags entirely (all browsers are fine with this):
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul>
你可以这样做，就像我通常做的那样：
<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><!-- --><li>Item 2</li><!-- --><li>Item 3</li> </ul>或者，如果您使用的是 PHP 或类似工具：
<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>
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.
既然我已经用“一千种不同的方法来删除空格，到三十岁”让你厌烦死了，希望你已经忘记了font-size: 0.
Alternatively, you can now use flexboxto achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
或者，您现在可以使用 flexbox来实现许多您以前可能使用 inline-block 的布局：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/
回答by HBP
For CSS3 conforming browsers there is white-space-collapsing:discard
对于符合 CSS3 的浏览器，有 white-space-collapsing:discard
see: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
见：http: //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
回答by Andrea Ligios
EDIT:
编辑：
today, we should just use Flexbox.
今天，我们应该只使用Flexbox。
OLD ANSWER:
旧答案：
OK, although I've upvoted both the font-size: 0;and the not implemented CSS3 featureanswers,
after trying I found out that none of them is a real solution.
好的，虽然我font-size: 0;对not implemented CSS3 feature答案和答案都投了赞成票，但在尝试之后我发现它们都不是真正的解决方案。
Actually, there is not even one workaround without strong side effects.
实际上，甚至没有一种没有强烈副作用的解决方法。
Then I decided to remove the spaces(this answers is about this argument) between the inline-blockdivs from my HTMLsource (JSP),
turning this:
然后我决定inline-block从我的HTML源 ( JSP) 中删除div之间的空格（这个答案是关于这个论点的），把这个：
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
to this
对此
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
that is ugly, but working.
这是丑陋的，但工作。
But, wait a minute... what if I'm generating my divs inside Taglibs loops(Struts2, JSTL, etc...) ?
但是，等一下...如果我在Taglibs loops( Struts2, JSTL, etc...) 中生成我的 div呢？
For example:
例如：
<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>
It is absolutely not thinkable to inline all that stuff, it would mean
内联所有这些东西绝对是不可想象的，这意味着
<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>
that is not readable, hard to mantain and understand, etc...
不可读，难以维护和理解，等等......
The solution i found:
我找到的解决方案：
use HTML comments to connect the end of one div to the begin of the next one!
使用 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>
This way you will have a readable and correctly indented code.
这样，您将拥有可读且正确缩进的代码。
And, as a positive side effect, the HTML source, although infested by empty comments,
will result correctly indented;
并且，作为一个积极的副作用HTML source，虽然被空注释感染，但会导致正确缩进；
let's take the first example. In my humble opinion, this:
让我们举第一个例子。以我的拙见，这是：
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
is better than this:
比这更好：
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
回答by Radek
Add commentsbetween elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.
在元素之间添加注释以没有空格。对我来说，这比将字体大小重置为零然后再设置回来更容易。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
回答by Yarin
All the space elimination techniques for display:inline-blockare nasty hacks...
所有的空间消除技术display:inline-block都是讨厌的黑客......
Use Flexbox
使用弹性盒
It's awesome, solves all this inline-block layout bs, and as of 2017 has 98% browser support(more if you don't care about old IEs).
太棒了，解决了所有这些内联块布局 bs，截至 2017 年有98% 的浏览器支持（如果您不关心旧的 IE，则支持更多）。
回答by Mo.
Add display: flex;to the parent element. Here is the solution with a prefix:
添加display: flex;到父元素。这是带有前缀的解决方案：
Simplified version
简化版
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}<p>
<span> Foo </span>
<span> Bar </span>
</p>Fix with prefix
用前缀修复
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>回答by Aldfrith
This is the same answer I gave over on the related: Display: Inline block - What is that space?
这与我给出的相关答案相同：显示：内联块 - 那个空间是什么？
There's actually a really simple way to remove whitespace from inline-block that's both easy and semantic. It's called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-familyon the container and back again on the children, and voila. Like this:
实际上有一种非常简单的方法可以从内联块中删除空格，既简单又语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（由浏览器为行内元素添加）。一旦你声明了字体，你只需改变font-family容器上的 ，然后再回到孩子身上，瞧。像这样：
@font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here's a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css @font-facedeclaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
适合口味。这是我刚刚在 font-forge 中制作并使用 FontSquirrel webfont 生成器转换的字体的下载。花了我5分钟。@font-face包含css声明：zipped zero-width space font。它位于 Google 云端硬盘中，因此您需要单击“文件”>“下载”将其保存到您的计算机。如果您将声明复制到主 css 文件，您可能还需要更改字体路径。
回答by Ilya Streltsyn
Two more options based on CSS Text Module Level 3(instead of white-space-collapsing:discardwhich had been dropped from the spec draft):
另外两个基于CSS 文本模块级别 3 的选项（而不是white-space-collapsing:discard已从规范草案中删除）：
word-spacing: -100%;
word-spacing: -100%;
In theory, it should do exactly what is needed — shorten whitespaces between 'words' by the 100% of the space character width, i.e. to zero. But seems not to work anywhere, unfortunately, and this feature is marked 'at risk' (it can be dropped from the specification, too).
从理论上讲，它应该完全满足需要 - 将“单词”之间的空格缩短 100% 的空格字符宽度，即为零。但不幸的是，似乎在任何地方都不起作用，并且此功能被标记为“有风险”（它也可以从规范中删除）。
word-spacing: -1ch;
word-spacing: -1ch;
It shortens the inter-word spaces by the width of the digit '0'. In a monospace font it should be exactly equal to the width of the space character (and any other character as well). This works in Firefox 10+, Chrome 27+, and almost works in Internet Explorer 9+.
它将字间距缩短了数字“0”的宽度。在等宽字体中，它应该完全等于空格字符（以及任何其他字符）的宽度。这适用于 Firefox 10+、Chrome 27+，并且几乎适用于 Internet Explorer 9+。
回答by dipole_moment
Unfortunately, it is 2019 and white-space-collapseis still not implemented.
不幸的是，现在是 2019 年，white-space-collapse仍然没有实施。
In the meantime, give the parent element font-size: 0;and set the font-sizeon the children. This should do the trick
同时，给父元素font-size: 0;并设置子元素font-size。这应该可以解决问题
回答by Plippie
Use flexbox and do a fallback (from suggestions above) for older browsers:
使用 flexbox 并对旧浏览器进行回退（根据上面的建议）：
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
