如何解决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;
}

显示效果：

几种解决方式：

一、将a标签的父元素的font-size设置为0：

nav {
  font-size: 0;
}

注意：需要在a标签设置font-size大小，不然看不到文字。

二、将html代码改成：

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

或者

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

三、修改a标签的margin-right值：

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

四、使用html5去掉元素结束标记：

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