战斗内联块元素之间的空间

这是交易：一系列inline-block格式化的格式，就像你通常格式化HTML一样，它们之间会有空格。

换一种说法：

<span style="color:white"><code class="language-markup"><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>nav</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>a</span> <span style="color:#ab875d">href</span><span style="color:#8f9c6c"><span style="color:#ab875d">=</span><span style="color:#ab875d">"</span>#<span style="color:#ab875d">"</span></span><span style="color:#ab875d">></span></span>One<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>a</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>a</span> <span style="color:#ab875d">href</span><span style="color:#8f9c6c"><span style="color:#ab875d">=</span><span style="color:#ab875d">"</span>#<span style="color:#ab875d">"</span></span><span style="color:#ab875d">></span></span>Two<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>a</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>a</span> <span style="color:#ab875d">href</span><span style="color:#8f9c6c"><span style="color:#ab875d">=</span><span style="color:#ab875d">"</span>#<span style="color:#ab875d">"</span></span><span style="color:#ab875d">></span></span>Three<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>a</span><span style="color:#ab875d">></span></span>
<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>nav</span><span style="color:#ab875d">></span></span></code></span>

<span style="color:#cd6a51"><code class="language-css"><span style="color:#dfc48c">nav a </span><span style="color:white">{</span>
  <span style="color:#9b869c">display</span><span style="color:white">:</span> inline-block<span style="color:white">;</span>
  <span style="color:#9b869c">padding</span><span style="color:white">:</span> <span style="color:#9b869c">5</span>px<span style="color:white">;</span>
  <span style="color:#9b869c">background</span><span style="color:white">:</span> red<span style="color:white">;</span>
<span style="color:white">}</span></code></span>

将导致：

通常非常不受欢迎

我们经常希望元素相互对立。在导航的情况下，这意味着它避免了尴尬的小不可忽略的间隙。

这不是一个“错误”（我不认为）。这只是在一条线上设置元素的方式。您希望键入的单词之间的空格是空格吗？这些块之间的空间就像单词之间的空格。这并不是说规范无法更新，因为内联块元素之间的空格应该没什么，但我相当确定这是一个不可能发生的大量蠕虫。

这里有一些方法可以消除差距并使内联块元素直接相邻。

＃删除空格

获得空格的原因是因为，元素之间有空格（换行符和几个选项卡计为空格，只是为了清楚）。最小化HTML将解决此问题，或这些技巧之一：

<span style="color:white"><code class="language-markup"><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>ul</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>
   one<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>
   two<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>
   three<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span>
<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>ul</span><span style="color:#ab875d">></span></span></code></span>

要么

<span style="color:white"><code class="language-markup"><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>ul</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>one<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span>
  <span style="color:#ab875d">></span></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>two<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span>
  <span style="color:#ab875d">></span></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>three<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span>
<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>ul</span><span style="color:#ab875d">></span></span></code></span>

或者评论......

<span style="color:white"><code class="language-markup"><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>ul</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>one<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span><span style="color:#777777"><!--
  --></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>two<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span><span style="color:#777777"><!--
  --></span><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>three<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>li</span><span style="color:#ab875d">></span></span>
<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>ul</span><span style="color:#ab875d">></span></span></code></span>

它们都非常时髦，但它可以解决问题。

＃负边际

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

<span style="color:#cd6a51"><code class="language-css"><span style="color:#dfc48c">nav a </span><span style="color:white">{</span>
  <span style="color:#9b869c">display</span><span style="color:white">:</span> inline-block<span style="color:white">;</span>
  <span style="color:#9b869c">margin-right</span><span style="color:white">:</span> -<span style="color:#9b869c">4</span>px<span style="color:white">;</span>
<span style="color:white">}</span></code></span>

＃跳过结束标记

HTML5无论如何都不在乎。虽然你必须承认，但感觉很奇怪。

<span style="color:white"><code class="language-markup"><span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>ul</span><span style="color:#ab875d">></span></span>
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>one
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>two
  <span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"><</span>li</span><span style="color:#ab875d">></span></span>three
<span style="color:#ab875d"><span style="color:#ab875d"><span style="color:#ab875d"></</span>ul</span><span style="color:#ab875d">></span></span></code></span>

＃设置字体大小为零

零的空间font-size是......零宽度。

<span style="color:#cd6a51"><code class="language-css"><span style="color:#dfc48c">nav </span><span style="color:white">{</span>
  <span style="color:#9b869c">font-size</span><span style="color:white">:</span> <span style="color:#9b869c">0</span><span style="color:white">;</span>
<span style="color:white">}</span>
<span style="color:#dfc48c">nav a </span><span style="color:white">{</span>
  <span style="color:#9b869c">font-size</span><span style="color:white">:</span> <span style="color:#9b869c">16</span>px<span style="color:white">;</span>
<span style="color:white">}</span></code></span>

Matt Stow报告字体大小：0; 技术在Android上有一些问题。Quote：Pre-Jellybean根本没有删除空间，而Jellybean有一个错误，即最后一个元素随机有一点空间。 见研究。

还要注意，如果你在ems中调整字体大小，这个零字体大小的东西可能是一个问题，因为ems级联，孩子们也将没有字体大小。Rems在这里会有所帮助，否则任何其他非级联都会font-size让它恢复正常。

另一种奇怪！Doug Stewart告诉我，如果你使用@ font-face这种技术，字体将在Safari 5.0.x中失去抗锯齿功能。（测试用例）（截图）。

＃只需浮动它们

也许他们根本不需要内联阻塞，也许他们可以以这种或那种方式浮动。这允许您设置它们的宽度和高度以及填充和填充。你不能像元素text-align: center;的父母一样把它们居中inline-block。嗯......你有点可以，但这很奇怪。

＃只需使用flexbox

如果您可以接受浏览器支持以及内联块所需的内容，则可以使用flexbox。它们不是完全可互换的布局模型或任何东西，但您可能会得到您需要的东西。

转自   https://css-tricks.com/fighting-the-space-between-inline-block-elements/