解决内联块元素之间的间隙

最近我在 Twitter 上看到这个问题出现了几次，然后 一个有趣的 Dabblet，所以我认为记录下来很重要。

问题是这样的：一系列按照正常 HTML 格式编写的 inline-block 元素之间会有空格。

换句话说

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

将导致

我们通常希望元素紧挨着彼此。在导航的情况下，这意味着避免了尴尬的小型不可点击的间隙。

这不是一个“错误”（我认为）。这只是在同一行设置元素的工作方式。您希望在键入的单词之间有空格，对吧？这些块之间的空格就像单词之间的空格一样。这并不是说规范不能更新为说明内联块元素之间的空格应该为空，但我相当肯定这是一个巨大的麻烦，不太可能发生。

以下是一些解决间隙并使内联块元素紧挨着彼此的方法。

移除空格

出现空格的原因是，您在元素之间有空格（换行符和一些制表符算作空格，需要明确这一点）。最小化的 HTML 将解决此问题，或者以下技巧之一

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

或者

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

或者使用注释…

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

它们都非常奇特，但确实有效。

负边距

您可以使用 -4px 的负边距将元素移回原位（可能需要根据父元素的字体大小进行调整）。显然，这在旧版 IE（6 和 7）中存在问题，但如果您不关心这些浏览器，至少可以保持代码格式整洁。

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

跳过闭合标签

HTML5 无所谓。虽然你必须承认，这感觉很奇怪。

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

将字体大小设置为零

字体大小为零的空格…宽度为零。

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

直接使用浮动

也许它们根本不需要是内联块，也许它们可以被以某种方式浮动。这允许您设置它们的宽度、高度和填充等。您只是不能像使用 text-align: center; 对 inline-block 元素的父元素那样进行居中。好吧……您可以做到，但 它很奇怪。

直接使用 Flexbox

如果 浏览器支持 对您来说是可以接受的，并且您需要从内联块中获得的是居中，您可以使用 Flexbox。它们并不是完全可以互换的布局模型，但您可能会从中获得所需的内容。

查看

示例 在 CodePen 上