如何删除内联/内联块元素之间的空间？

【问题标题】：How to remove the space between inline/inline-block elements?如何删除内联/内联块元素之间的空间？
【发布时间】：2019-07-22 21:03:19
【问题描述】：

鉴于此 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


【解决方案1】：

或者，您 should now use flexbox 来实现您以前可能使用过 inline-block 的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于这个答案变得相当流行，我正在重写它。

我们不要忘记提出的实际问题：

如何去除inline-block 元素之间的空格？我希望 对于不需要 HTML 源代码的 CSS 解决方案 篡改。 这个问题可以单独用 CSS 解决吗？

可以单独使用 CSS 解决这个问题，但是没有完全强大的 CSS 修复。

我最初回答的解决方案是将font-size: 0 添加到父元素，然后在子元素上声明一个合理的font-size。

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

这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 中不工作，但在 Safari 6 中确实工作。Safari 5 几乎是一个死浏览器 (0.33%, August 2015)。

相对字体大小的大多数可能问题并不复杂。

但是，如果您特别需要仅修复 CSS，这是一个合理的解决方案，但如果您可以随意更改 HTML（就像我们大多数人一样），我不建议您这样做。

这就是我作为一个经验丰富的 Web 开发人员实际解决这个问题的方法：

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

是的，没错。我删除了 HTML 中内联块元素之间的空格。

这很容易。这很简单。它无处不在。这是务实的解决方案。

您有时必须仔细考虑空格的来源。 用 JavaScript 附加另一个元素会添加空格吗？不，如果你做得好，不会。

让我们开始一段神奇的旅程，用不同的方式去除空白，使用一些新的 HTML：

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

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

  • 或者，这个：

     <ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

  • 或者，使用 cmets：

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

  • 或者，you can 甚至完全跳过 certain 结束标签（所有浏览器都可以这样做）：

     <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
 </ul>

现在我已经用“一千种不同的方法来删除空格，三十点”让你厌烦至死，希望你已经忘记了所有关于 font-size: 0 的事情。

【讨论】：

  • 它适用于FF3.6、IE9RC、O11、Ch9。但是，在 Safari 5 中仍然存在 1px 宽的差距:(
  • @thirtydot 你能看看this answer的评论。可能这个font-size:0 技巧毕竟不是一个好主意......
  • 我知道发帖人正在寻找一个 CSS 解决方案，但是这个解决方案——这是迄今为止投票最多的（30 票对 5 票，当我写这篇文章时）——有很强的副作用，甚至没有跨浏览器工作。在这一点上，简单地删除 HTML 中有问题的空格更为实用。
  • 此解决方案仅适用于您的容器尺寸不使用 EM 时
  • 这会破坏具有相对字体大小的子元素。
【解决方案2】：

对于符合 CSS3 的浏览器，有 white-space-collapsing:discard

见：http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

【讨论】：

  • 这已从文本级别 3 中删除，但文本级别 4 具有 text-space-collapse:discard。已经是 2016 年了，仍然没有支持。
【解决方案3】：

我现在遇到了这个问题，从font-size:0; 我发现在 Internet Explorer 7 中问题仍然存在，因为 Internet Explorer 认为“字体大小为 0？！？！WTF 你是疯子吗？” - 所以，在我的情况下，我重置了 Eric Meyer 的 CSS，并且使用 font-size:0.01em; 我从 Internet Explorer 7 到 Firefox 9 有 1 个像素的差异，所以，我认为这可能是一个解决方案。

【讨论】：

    【解决方案4】：

    今天，我们应该只使用Flexbox。

    旧答案：

    好的，尽管我对font-size: 0; 和not implemented CSS3 feature 的答案都投了赞成票， 尝试后我发现它们都不是真正的解决方案。

    实际上，没有一种解决方法没有强烈的副作用。

    然后我决定从我的HTML 源（JSP）中删除inline-block div 之间的空格（这个答案是关于这个论点）， 转这个：

    <div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

    到这里

    <div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

    这很丑，但可以工作。

    但是，等一下...如果我在 Taglibs loops（Struts2、JSTL 等...）中生成 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>

    内联所有这些东西是绝对不可想象的，这意味着

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

    这不可读，难以维护和理解等。

    我找到的解决方案：

    使用 HTML cmets 将一个 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>

    这样您将获得可读且正确缩进的代码。

    而且，作为一个积极的副作用，HTML source，虽然被空的 cmets 感染， 将导致正确缩进；

    让我们举第一个例子。在我看来，这是：

        <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

    比这更好：

        <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

    【讨论】：

    • 请注意，这也可能会破坏编辑器中的代码折叠功能。
    • 在顶部使用 Flexbox 的示例将改进此答案。
    【解决方案5】：

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

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

    【讨论】：

    【解决方案6】：

    基于CSS Text Module Level 3 的另外两个选项（而不是从规范草案中删除的white-space-collapsing:discard）：

    • word-spacing: -100%;

    理论上，它应该完全满足需要——缩短空格 在“单词”之间按空格字符宽度的 100%，即 零。但不幸的是，似乎在任何地方都不起作用，而这 功能被标记为“有风险”（它也可以从规范中删除）。

    • word-spacing: -1ch;

    它将字间距缩短了数字“0”的宽度。在等宽字体中，它应该完全等于空格字符（以及任何其他字符）的宽度。这适用于 Firefox 10+、Chrome 27+，并且几乎适用于 Internet Explorer 9+。

    Fiddle

    【讨论】：

    • +1 表示字间距，虽然 -0.5ch 是正确的值，但没有空格的 -1ch 文本将无法阅读，-0.5ch 的行为就像 font-size: 0;在文本元素处显式设置大小。 :)
    • @Dennis98，-1ch 仅适用于等宽字体（如 Courier New），因为它们的所有字符都具有相同的宽度，包括 ' ' 和 '0'。在非等宽字体中，' ' 和 '0' 字符的宽度之间没有完全合适的魔法比例，因此 ch 根本没有多大帮助。
    • 代替word-spacing，我们可以使用letter-spacing 和任意大的负值，如my answer 所示
    【解决方案7】：

    我最近一直在解决这个问题，而不是设置父容器 font-size:0 然后将子容器设置回合理的值，我通过将父容器设置为 letter-spacing:-.25em 然后将子容器设置回 @ 来获得一致的结果987654324@.

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

    无论指定的字体大小是 100%、15pt 还是 36px，使用 em 似乎都有效。

    http://cdpn.io/dKIjo

    【讨论】：

    • 在 Firefox for Android 中，我看到框之间有 1px 的空间。
    【解决方案8】：

    使用 flexbox 并为旧浏览器做一个后备（根据上面的建议）：

    ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    【讨论】：

      【解决方案9】：

      这是我在相关问题上给出的相同答案：Display: Inline block - What is that space?

      实际上有一种非常简单的方法可以从 inline-block 中删除空格，它既简单又符合语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（当内联元素位于单独的行时由浏览器添加）。声明字体后，只需更改容器上的 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;
}

      适合口味。这是我刚刚在 font-forge 中制作并使用 FontSquirrel webfont 生成器转换的字体的下载。花了我5分钟。包含 css @font-face 声明：zipped zero-width space font。它位于 Google 云端硬盘中，因此您需要单击文件 > 下载以将其保存到您的计算机。如果将声明复制到主 css 文件中，您可能还需要更改字体路径。

      【讨论】：

      • 我看到你在 CSS Tricks 中发布了这个我想，对我来说这是一个很棒的 答案。它是轻量级的，易于实现和跨浏览器（据我的测试显示）。我完全使用 flexbox，直到我意识到 Firefox 至少要到 v28 (srsly?) 才会支持 flex-wrap，但在此之前这是一个完美的后备方案。
      • 这是我很久以来看到的最糟糕的过度杀伤情况。下载整个字体只是为了删除一个空格？天哪。
      • @MrLister 你知道这样的字体文件很小吗？它里面没有任何字形。我会争辩说宁愿将它包含在 base64 编码中，这样我们也可以摆脱请求。
      • 这与图标字体具有相同的致命缺陷，即当 Web 字体被阻止（例如出于带宽或安全原因）或被自定义字体覆盖（例如由于健康原因，例如如阅读障碍等）。
      【解决方案10】：

      字体大小：0；管理起来可能有点棘手......

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

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

      那么你可以如下使用它...

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

      据我所知（我可能错了），但所有浏览器都支持这种方法。

      解释：

      这完全符合您的预期（也许 -3px 可能更好）。

      • 您复制并粘贴代码（一次）
      • 然后在您的 html 中，只需在每个内联块的父级上使用 class="items"。

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

      一次解决两个问题。

      还要注意&gt;（大于号），这意味着*/所有孩子都应该是内联块。

      http://jsfiddle.net/fD5u3/

      注意：当包装器具有子包装器时，我已进行修改以适应继承字母间距。

      【讨论】：

      • 而不是-4px for letter-spacing 这对于大字体大小eg: see this fiddle 可能不够，我们可以使用更大的值，如my post
      【解决方案11】：

      display:inline-block 的所有空间消除技术都是令人讨厌的 hack……

      使用Flexbox

      太棒了，解决了所有这些内联块布局，截至 2017 年有 98% browser support（如果你不关心旧的 IE，则更多）。

      【讨论】：

      • 讨厌的 hack 可能是，但是 font-size:0 可以在 100% 的浏览器上工作，并且应用 display: inline-flex 仍然不能消除额外的空格，即使在浏览器上确实支持！
      • @patrick Flexbox 绝对可以解决问题，您只是做错了。 inline-flex 并不意味着内联显示弹性项目 - 它仅适用于容器。见stackoverflow.com/a/27459133/165673
      • "font-size:0" 不适用于 100% 的浏览器。 （最小字体大小浏览器设置）。而且这个答案真的很好。
      【解决方案12】：

      2021 年解决方案

      很遗憾，white-space-collapse 仍未实现。

      同时，给父元素font-size: 0; 并在子元素上设置font-size。这应该可以解决问题

      【讨论】：

        【解决方案13】：

        将display: flex; 添加到父元素。这是带有前缀的解决方案：

        简化版?

        p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
        <p>
  <span> Foo </span>
  <span> Bar </span>
</p>

        用前缀?修复

        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>

        【讨论】：

        • 这是一个很好的答案！不过，我认为将简化版本放在最上面会很整洁，这样读者就会首先看到它。或者甚至可能删除非简化版本。
        • @Stefnotch 完成✅感谢您的宝贵建议 :-)
        • 例如，当 span 的内容长于一个单词时，我会出现意外行为。以下以长列显示跨度内容，而不是“正常”流动的文本行：&lt;div class="container"&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/span&gt;&lt;span&gt;Donec mollis nulla vel dignissim varius, aliquam tempor elit eget ante viverra ultrices&lt;/span&gt;&lt;/div&gt; 注意：我已将 &lt;p&gt; 替换为容器 div - jsFiddle link is here
        • 这对我有用，谢谢。
        【解决方案14】：

        通常我们在不同的行中使用这样的元素，但如果display:inline-block 在同一行使用标签会删除空格，但在不同的行不会。

        标签在不同行的示例：

        p span {
  display: inline-block;
  background: red;
}
        <p>
  <span> Foo </span>
  <span> Bar </span>
</p>

        标签在同一行的示例

        p span {
  display: inline-block;
  background: red;
}
        <p>
  <span> Foo </span><span> Bar </span>
</p>

        另一种有效的方法是 CSS 作业，它将 font-size:0 用于父元素，并将 font-size 尽可能多地分配给子元素。

        p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
        <p>
  <span> Foo </span>
  <span> Bar </span>
</p>

        根据整个应用程序，上述方法可能在某些地方不起作用，但最后一种方法对于这种情况是一种万无一失的解决方案，可以在任何地方使用。

        【讨论】：

        • 这种方法的一个缺点是我们需要知道并重复默认字体大小（例如14px）才能在子元素中将其恢复正常！
        【解决方案15】：

        这么多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距（margin-left 或 margin-right 取决于元素的位置）。

        【讨论】：

          【解决方案16】： 

          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>

          【讨论】：

          • 虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！
          • 我猜想 float 和 display:inline-block 对于 spans 是为了在不支持 flex 的情况下作为后备，但 float 将有效地丢弃 @ 的效果987654329@，所以后者显得多余。
          【解决方案17】：

          我将稍微扩展 user5609829 的答案，因为我认为这里的其他解决方案太复杂/工作量太大。将margin-right: -4px 应用于内联块元素将删除间距，并且所有浏览器都支持。请参阅更新的小提琴here。对于那些关心使用负边距的人，请尝试阅读this。

          【讨论】：

          • 如果用户更改浏览器的默认字体大小，这将不起作用。更好地使用 -0.25em。
          【解决方案18】：

          我找到了一个在所有浏览器中都非常适合我的纯 CSS 解决方案：

          span {
    display: table-cell;
}

          【讨论】：

          • 这个问题是关于inline-block的。
          • @MadanBhandari 正确，但它似乎消除了所有肮脏黑客的需要。
          【解决方案19】：

          简单：

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

          无需触摸父元素。

          这里的唯一条件：不能定义项目的字体大小（必须等于父的字体大小）。

          0.25em 是默认的word-spacing

          W3Schools - word-spacing property

          【讨论】：

          • 0.25em 不是“默认字间距”，它是 Times New Roman 字体中空白字符的宽度，恰好是某些流行操作系统中的默认字体。 Helvetica 等其他流行字体通常具有更宽的空白字符，因此仅删除 0.25em 不足以消除空白。
          • 是的，使用负边距很简单，也是唯一在我的情况下真正有效的方法。
          【解决方案20】：

          在容器元素中添加white-space: 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>

          这里是Plunker。

          【讨论】：

          • 没有浮动就无法工作 - 您的 plunker 中缺少浮动。所以“空白：nowrap”似乎从来都不是一个可行的答案。
          【解决方案21】：

          去除内联块元素的空格，方法有很多：

          1. 字体大小为零

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

          2. 负边距

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

          3. 跳过结束标签

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

          4. 使用 cmets：

            <ul> <li>Item 1</li><!-- --><li>Item 2</li><!-- --><li>Item 3</li> </ul>

          【讨论】：

          • 1. px 的负边距不好，因为它取决于父级的 font-size。所以4px 只适用于父font-size: 16px。 2.每个浏览器/引擎对font-size: 0 的解释不同，因此并不总是有效。 3. 与 XHTML 不兼容。
          【解决方案22】：

          CSS Text Module Level 4 specification defines a text-space-collapse 属性，允许控制如何处理元素内部和周围的空白。

          所以，关于你的例子，你只需要这样写：

          p {
  text-space-collapse: discard;
}

          很遗憾，如answer of HBP 的 cmets 中所述，尚无浏览器实现此属性（截至 2016 年 9 月）。

          【讨论】：

            【解决方案23】：

            我发现的另一种方法是将 margin-left 应用为负值，但该行的第一个元素除外。

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

            【讨论】：

              【解决方案24】：

              在 CSS 中有一个简单的解决方案。例如：

              HTML

              <p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

              CSS

              .parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

              在我看来，font-size: 0 在像 em 这样的项目中使用它是不安全的，所以我更喜欢 purecss 的解决方案。

              您可以在此链接purecss 中查看此框架。享受 :)

              .row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}
              <div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>

              【讨论】：

                【解决方案25】：

                我尝试了 font-size: 0 解决 React 中类似问题的方法，并尝试了 Sass 解决我目前正在处理的 Free Code Camp 项目。

                而且它有效！

                一、脚本：

                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')
);

                然后，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

                【讨论】：

                  【解决方案26】：

                  我不太确定您是要制作两个没有间隙的蓝色跨度还是要处理其他空白，但如果您想消除间隙：

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

    float: left;
}

                  完成了。

                  【讨论】：

                    【解决方案27】：

                    不过，从技术上讲，这不是问题的答案： "如何删除行内块元素之间的空间？"

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

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

                    您可以通过此链接了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

                    【讨论】：

                    • 虽然技术上不是“我可以用内联块做这个”的答案，但在我看来这是一个优雅的解决方案......
                    【解决方案28】：

                    我认为有一个非常简单/旧的方法，所有浏览器都支持，甚至 IE 6/7。我们可以在父元素中简单地将letter-spacing 设置为一个较大的负值，然后在子元素中将其设置回normal：

                    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>

                    【讨论】：

                    • 这里发生了同样的事情，你需要在所有子元素中设置letter-spacing:normal。
                    • @GauravAggarwal 但letter-spacing 是normal 的99.99%。 font-size 没有这么固定的值，高度依赖于设计。根据字体系列和其他东西，它可能是一个小值或大值......我从不记得在我的生活中看到/使用letter-spacing 的特殊值（0/正常除外），所以我认为更安全，更好的选择
                    • 我不同意这一点...对所有元素使用正常的字母间距并也使用字体大小（如果需要）根本没有用，因为您在需要更改字体的地方编写双代码尺寸。使用字体大小不会产生双重代码，并且可以使用标准大小和任何其他自定义大小。我建议你做谷歌并检查使用字体大小这些天是最可以接受的事情。解决方案随时间变化:)
                    • 我无法理解您所说的 " 是什么意思...并且也使用字体大小（如果需要）根本没有用，因为您需要在需要更改字体的地方编写双代码大小。” 在我的帖子中，没有字体大小设置！我所做的只是字母间距，通常没有人在他的 CSS 中设置它（它总是正常的）。因为我们不改变字体大小，所以我们不需要知道原始字体大小来设置它
                    • 我想这种方法之前并没有流行起来，因为它在 Opera/Presto 中不起作用。目前我们还有其他不需要此类解决方法的选项，例如使用 Flexbox 而不是 inline-blocks。
                    【解决方案29】：

                    每一个试图删除inline-blocks 之间空格的问题对我来说都像是&lt;table&gt;...

                    试试这样的：

                    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>

                    【讨论】：

                      【解决方案30】：

                      带 PHP 括号：

                      ul li {
  display: inline-block;
}
                          <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

                      【讨论】：

                        猜你喜欢
                        • 2013-12-15
                        • 2016-09-24
                        • 1970-01-01
                        • 2013-09-30
                        相关资源
                        最近更新 更多
                        热门标签
                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode