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