如何删除行-块元素之间的空间?

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.

然而，我希望CSS解决方案不需要HTML源代码被篡改。

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来解决呢?

33 个解决方案

#1

833

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?

如何删除行内块元素之间的空间?我希望CSS解决方案不需要HTML源代码被篡改。这个问题能单独用CSS解决吗?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

仅用CSS解决这个问题是可能的，但是没有完全健壮的CSS修复。

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.

我最初的解决方案是向父元素添加font-size: 0，然后在子元素上声明一个合理的字体大小。

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).

这在所有现代浏览器的最新版本中都有效。它在IE8工作。它在Safari 5中不工作，但在Safari 6中工作。Safari 5几乎是一个死浏览器(2015年8月0.33%)。

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).

然而，尽管这是一个合理的解决方案，如果您特别需要一个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>
```
http://jsfiddle.net/thirtydot/dGHFV/1362/

http://jsfiddle.net/thirtydot/dGHFV/1362/

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.

现在，我已经用“一千种不同的方法删除空格，在30点之前”让你厌烦得要死，希望你已经忘记了字体大小: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/

或者，您现在可以使用flexbox来实现许多您以前可能使用的inline-block的布局:https://css- passs.com/snippets/css/a - guidetoflexbox/。

#2

137

For CSS3 conforming browsers there is white-space-collapsing:discard

对于CSS3浏览器，有白空间折叠:丢弃

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

#3

Ok, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers, after trying I found out that none of them is a real solution.

好吧，虽然我把字体大小都调高了;没有实现CSS3特性的答案，在尝试之后我发现它们都不是真正的解决方案。

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-block divs from my HTML source (JSP), turning this:

然后我决定从我的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循环(Struts2、JSTL等)中生成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源代码虽然被空洞的注释所困扰，但会正确地缩进;

let's take the first example, imho 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>

Hope that helps...

希望这有助于……

#4

Add comments between elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.

在元素之间添加注释，使其没有空格。对我来说，这比将字体大小重置为0然后重新设置要容易得多。

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

#5

This is the same answer I gave over on the related: Display: Inline block - What is that space?

这和我之前给出的答案是一样的:Display: Inline block——这个空间是什么?

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-family on the container and back again on the children, and voila. Like this:

实际上有一种非常简单的方法可以从行内块中删除空格，这既简单又有语义。它被称为具有零宽度空间的自定义字体，它允许您使用非常小的字体在字体级别上折叠空白空间(由浏览器为行内元素添加)。一旦你声明了字体，你只需要改变容器上的字体族，然后再回到子元素上。是这样的:

@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-face declaration 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分钟。css @font-face声明包括:压缩的零宽度空间字体。它在谷歌驱动器中，所以您需要单击File >下载，将其保存到您的计算机中。如果将声明复制到主css文件中，您可能还需要更改字体路径。

#6

All the space elimination techniques for display:inline-block are nasty hacks...

所有用于显示的空间消除技术:内线块是令人讨厌的黑客……

Use Flexbox

使用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).

它非常棒，解决了所有这些内嵌块布局的问题，到2017年有98%的浏览器支持(如果你不关心旧的IEs的话会更多)。

Are We Ready to Use Flexbox?
我们准备好使用Flexbox了吗?
Using CSS flexible boxes - Web developer guide | MDN
使用CSS灵活的盒子- Web开发者指南| MDN。
A Complete Guide to Flexbox | CSS-Tricks
一个完整的指南的Flexbox | CSS-Tricks
Flexy Boxes — CSS flexbox playground and code generation tool
Flexy Boxes - CSS flexbox操场和代码生成工具。

#7

Two more options based on CSS Text Module Level 3 (instead of white-space-collapsing:discard which had been dropped from the spec draft):

基于CSS文本模块第3级的两个选项(而不是白空间崩溃:放弃从规范草案中删除):

word-spacing: -100%;
词间距:-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;
词间距:1 ch;

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”的宽度来缩短单词间的空格。在monospace字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+、Chrome 27+，几乎适用于Internet Explorer 9+。

Fiddle

小提琴

#8

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;
}

#9

Add display: flex; to the parent element. Here is the solution with a prefix:

添加显示:flex;父元素。这里有一个前缀的解决方案:

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>

#10

Unfortunately, it is 2015 and white-space-collapse is still not implemented.

不幸的是，现在是2015年，白色空间的崩溃仍未实施。

In the meantime, give the parent element font-size: 0; and set the font-size on the children. This should do the trick

同时，给父元素font-size: 0;并设置孩子的字体大小。这应该能达到目的

#11

font-size:0; can be a bit trickier to manage...

字体大小:0;管理起来可能有点棘手……

I think the following couple lines is a lot better and more re-usable, and time saver than any other methods. I personally use this:

我认为以下几行代码比其他任何方法都更好、更可重用、更节省时间。我个人使用:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Then you can use it as following...

然后你可以这样使用……

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

As far I as I know (I may be wrong) but all browsers support this method.

据我所知(我可能是错的)，所有浏览器都支持这种方法。

EXPLANATION:

解释:

This works (maybe -3px may be better) exactly as you would anticipate it to work.

它可以工作(也许-3px更好)，就像你预期的那样。

you copy and paste the code (once)
复制并粘贴代码(一次)
then on your html just use class="items" on the parent of each inline-block.
然后在html中，在每个行块的父块上使用class="items"。

You will NOT have the need to go back to the css, and add another css rule, for your new inline blocks.

您不需要返回到css，并为新的内联块添加另一个css规则。

Solving two issues at once.

同时解决两个问题。

Also note the > (greater than sign) this means that */all children should be inline-block.

还要注意>(大于符号)，这意味着*/所有子元素都应该是内联块。

http://jsfiddle.net/fD5u3/

NOTE: I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper.

注意:我已经修改了，以便在包装器有子包装器时继承字母间距。

#12

Simple:

简单:

item {
  display: inline-block;
  margin-right: -0.25em;
}

There is no need to touch the parent element.

没有必要去触摸父元素。

Only condition here: the item's font-size must not be defined (must be equal to parent's font-size).

只有在此条件下:该项目的字体大小不能被定义(必须等于父方的字体大小)。

0.25em is the default word-spacing

0.25em是默认的字间距

W3Schools - word-spacing property

W3Schools——词间距属性

#13

Though, technically not an answer to the question: "How do I remove the space between inline-block elements?"

但是，从技术上来说，这并不是一个问题的答案:“如何删除行-块元素之间的空间?”

You can try the flexbox solution and apply the code below and the space will be remove.

您可以尝试flexbox解决方案并应用下面的代码，空间将被删除。

p {
   display: flex;
   flex-direction: row;
}

You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您可以通过这个链接了解更多信息:https://css-trick . /snippets/css/a-guide to flexbox/

#14

I had this problem right now and from font-size:0; I've found that in Internet Explorer 7 the problem remains because Internet Explorer thinks "Font Size 0?!?! WTF are you crazy man?" - So, in my case I've Eric Meyer's CSS reset and with font-size:0.01em; I have a difference of 1 pixel from Internet Explorer 7 to Firefox 9, so, I think this can be a solution.

我现在有这个问题，从字体大小:0;我发现在Internet Explorer 7中仍然存在问题，因为Internet Explorer认为“字体大小为0?!”你疯了吗?"-所以，在我的例子中，我有Eric Meyer的CSS reset和font-size:0.01em;从ie 7到Firefox 9我有一个1像素的差异，所以我认为这是一个解决方案。

#15

Generally we use elements like this in different lines, but in case of display:inline-block using tags in same line will remove the space, but in a different line will not.

通常我们在不同的行中使用这样的元素，但是在显示的情况下:在同一行中使用标记的内联块将删除空间，但是在不同的行中不会。

An example with tags in a different line:

一个标签在另一行的例子:

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Example with tags in same line

标签在同一行的例子

p span {
  display: inline-block;
  background: red;
}

<p>
  <span> Foo </span><span> Bar </span>
</p>

Another efficient method is a CSS job that is using font-size:0 to the parent element and give font-size to a child element as much as you want.

另一个有效的方法是CSS作业，它使用字体大小:0表示父元素，并根据需要给子元素赋予字体大小。

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.

以上方法可能在某些地方并不适用，这取决于整个应用程序，但是最后一种方法对于这种情况是一个简单的解决方案，可以在任何地方使用。

#16

I'm not pretty sure if you want to make two blue spans without a gap or want to handle other white-space, but if you want to remove the gap:

我不太确定你是想做两个没有间隙的蓝色跨度，还是想处理其他的空白，但如果你想消除间隙:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

And done.

和完成。

#17

I’ve been tackling this recently and instead of setting the parent font-size:0 then setting the child back to a reasonable value, I’ve been getting consistent results by setting the parent container letter-spacing:-.25em then the child back to letter-spacing:normal.

我最近一直在解决这个问题，并没有设置父类字体大小:0然后将子类设置为一个合理的值，而是通过设置父容器的字母间距:-来获得一致的结果。然后孩子回到字母间隔:正常。

In an alternate thread I saw a commenter mention that font-size:0 isn’t always ideal because people can control minimum font sizes in their browsers, completely negating the possibility of setting the font-size to zero.

在另一个线程中，我看到一个评论者提到，font-size:0并不总是理想的，因为人们可以控制浏览器中的最小字体大小，完全否定了将字体大小设置为0的可能性。

Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.

无论指定的字体大小是100%、15pt还是36px，使用ems似乎都可以工作。

http://cdpn.io/dKIjo

#18

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}

<p>
  <span> hello </span>
  <span> world </span>
</p>

#19

I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:

我认为有一种非常简单的/旧的方法可以被所有浏览器支持，甚至ie6 /7。我们可以简单地将父元素的字母间距设置为一个较大的负值，然后将子元素的字符间距设置为正常:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

#20

With PHP brackets:

使用PHP括号:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

#21

I'm going to expand on user5609829's answer a little bit as I believe the other solutions here are too complicated/too much work. Applying a margin-right: -4px to the inline block elements will remove the spacing and is supported by all browsers. See the updated fiddle here. For those concerned with using negative margins, try giving this a read.

我将扩展user5609829的答案因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用一个空白-right: -4px将删除空格，并得到所有浏览器的支持。请看这里更新的小提琴。对于那些关心使用负边距的人，试着读一下。

#22

The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.

CSS文本模块第4级规范定义了一个文本空间折叠属性，该属性允许控制如何处理元素内部和周围的空白。

So, regarding your example, you would just have to write this:

关于你的例子，你只需要写下

p {
  text-space-collapse: discard;
}

Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.

不幸的是，还没有浏览器实现这个属性(从2016年9月开始)，正如HBP的回答中提到的。

#23

Add white-space: nowrap to the container element:

在容器元素中添加空格:nowrap:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Here is the Plunker.

这是一美元。

#24

I tried out the font-size: 0 solution to a similar problem in React and Sass for a Free Code Camp project I am currently working through.

我在React和Sass中尝试了一个类似的问题:0解决方案，用于我目前正在进行的一个免费代码夏令营项目。

And it works!

和它的工作原理!

First, the script:

首先,脚本:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Then, the Sass:

然后,Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

#25

Just for fun: an easy JavaScript solution.

只是为了好玩:一个简单的JavaScript解决方案。

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

#26

There are lots of solutions like font-size:0,word-spacing,margin-left,letter-spacing and so on.

有很多解决方案，比如字体大小:0，单词间距，边距，字母间距等等。

Normally I prefer using letter-spacing because

通常我更喜欢使用字母间距，因为

it seems ok when we assign a value which is bigger than the width of extra space(e.g. -1em).
当我们分配一个大于额外空间宽度的值时(例如1 em)。
However, it won't be okay with word-spacing and margin-left when we set bigger value like -1em.
但是，当我们设置更大的值，比如-1em时，对字间距和左对齐都不行。
Using font-size is not convenient when we try to using em as font-size unit.
当我们尝试使用em大小的单元时，使用字体大小是不方便的。

So, letter-spacing seems to be the best choice.

因此，字母间距似乎是最好的选择。

However, I have to warn you

不过，我得警告你

when you using letter-spacing you had better using -0.3em or -0.31em not others.

当你使用字母间距时，你最好使用-0.3em或-0.31em而不是其他。

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

If you are using Chrome(test version 66.0.3359.139) or Opera(test version 53.0.2907.99), what you see might be:

如果您正在使用Chrome(测试版本66.0.3359.139)或Opera(测试版本53.0.2907.99)，您将看到以下内容:

If you are using Firefox(60.0.2),IE10 or Edge, what you see might be:

如果您使用的是Firefox(60.0.2)、IE10或Edge，您所看到的可能是:

That's interesting. So, I checked the mdn-letter-spacing and found this:

这很有趣。因此，我检查了mdn-字母间距，发现:

length

长度

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

除了字符之间的默认空间之外，指定额外的字符间空间。值可能是负数，但可能存在特定于实现的限制。用户代理不得进一步增加或减少字符之间的空间，以证明文本的合理性。

It seems that this is the reason.

看来这就是原因。

#27

-1

One another way I found is applying margin-left as negative values except the first element of the row.

我发现的另一种方法是，除了行中的第一个元素外，用左边界作为负值。

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

#28

-1

Every question, that try to remove the space between inline-blocks seems like a <table> to me...

在我看来，每一个试图删除行块之间空间的问题都像是

……

Try something like this:

试试这样:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

#29

-1

I found a pure CSS solution that worked for me very well in all browsers:

我找到了一个纯CSS的解决方案，在所有浏览器中都很好用:

span {
    display: table-cell;
}

#30

-1

Remove the spaces from inline block elements. There are many methods:

从内联块元素中删除空格。有很多方法:

Negative margin

消极的保证金

div a {
    display: inline - block;
    margin - right: -4 px;
}

Font size to zero

字体大小为零

nav {
    font - size: 0;
}
nav a {
    font - size: 16 px;
}

Skip the closing tag

跳过关闭标签

< ul >
    < li > one
    < li > two
    < li > three
< /ul>

#1

833