inline-block元素间的间隙问题

标签：inline-block   间隙   去除   font-size为0   

在我们使用inline-block时会发现元素间存在间隙，如下例所示

<nav>
      <a href="#">one</a>
      <a href="#">one</a>
      <a href="#">one</a>
</nav>

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

上面代码的效果如上图所示，我们可以清晰地看到链接之间的白色空隙，而这是为什么呢？

这个应该不是“bug”，因为对于这种行内元素的设置来说，更像是单词与单词之间的空隙一样，默认会有行内元素之间的空隙。

解决这个问题的方式有以下几种。

1、去除空格

在元素与元素之间，通常我们会将换行符或tab符作为一个空格看待，去除这些当作空格的元素即可解决问题

<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>

可以为inline-block的元素设置负margin值，一般为-4，但是根据父级元素的font-size会有相应的变化，使得元素间隙消失

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

3、省略闭合符号

<nav>
      <li>one
      <li>two
      <li>three
</nav>

4、设置父元素的font-size为0

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

inline-block元素间的间隙问题

标签：inline-block   间隙   去除   font-size为0   

原文地址：http://blog.csdn.net/missing27/article/details/45881491