[翻译]内联布局之内联元素之间的空白

[songhlc]

引：flexbox布局的出现解决了以往float布局以及inline-block布局遗留的问题，本文先针对inline－block布局出现的元素间空白的问题做出描述

文章原文：https://css-tricks.com/video-screencasts/

攻克inline-block元素间的空格问题

问题现象：当你对一系列的内联元素进行普通的格式化时，这些内联元素之间就出现了空白。

比如：

HTML

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

CSS

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

结果

点我看图片

我们通常希望这些元素紧密的连接在一起，在使用到导航时不会出现中间不可点击的空白区域。

这其实并不是一个bug（至少作者认为），这只是设置这些元素在同一行显示的一种方式。我们通常也希望在文字和文字之间存在空格以方便阅读。这并不意味着这些文字之间的空格不应该存在，但我相当肯定，如果休整了它就能够解决一系列的问题。

删除空格

产生以上现象的原因，因为你的这些元素之间存在着空格，可能是换行符，也可能是tab产生的空格。压缩html代码可以解决这个问题，或者像下面这样的小戏法

HTML

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

或者

HTML

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

或者使用注释

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

使用margin的负值

你可以给元素设置一个-4px的margin。

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

忽略结束标签

当然，这会让你感觉怪怪的。

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

设置字号大小为0

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

ps：Android端不起作用

使用浮动就好了

或许并不需要把元素设置成inline-block,设置成浮动就好了。你同样可以设置宽度高度padding和其他一些特性，只不过不能使用text-align:center;内敛元素的父元素。你可以这么做，就是还是优点奇怪。

最好的方案，使用flexbox来取代

当 浏览器支持 的情况下

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

关于demo

参考demo

编者注：每个东西出现总有其必然性，了解背后的原因能帮你更好的了解它