解决inline-block中间缝隙

解决inline-block中间缝隙

本质：inline-block中间缝隙的本质是html中存在的空白字符（inline-block标签之间的回车符）
举例：

li {
  display: inline-block;
  background-color: red;
}

<ul>
  <li><a href="#">登录</a></li>
  <li><a href="#">快速注册</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">帮助</a></li>
  <li><a href="#">APP下载</a></li>
</ul>

一、去除空白符

1. 删除inline-block元素之间的换行符

<ul>
  <li><a href="#">登录</a></li><li><a href="#">快速注册</a></li><li><a href="#">关于</a></li><li><a href="#">帮助</a></li><li><a href="#">APP下载</a></li>
</ul>

原理：因为换行符会导致空白符从而导致inline-block元素之间的间隙。
缺点：降低可读性。

2.将闭合标签换行

<ul>
  <li><a href="#">登录</a>
  </li><li><a href="#">快速注册</a>
  </li><li><a href="#">关于</a>
  </li><li><a href="#">帮助</a>
  </li><li><a href="#">APP下载</a>
  </li>
</ul>

原理：去除空白符，增加可读性。

二、将父节点的font-size设置为0

ul{
  font-size:0;
}

li{
  font-size:1.2rem;
  display: inline-block;
  background-color: red;
}

原理：空白符所占的大小为0。
缺点：

1. 子元素需要单独设置font-size
2. 会出现下边距等问题

三、标签不闭合

 <ul>
  <li><a href="#">登录</a>
  <li><a href="#">快速注册</a>
  <li><a href="#">关于</a>
  <li><a href="#">帮助</a>
  <li><a href="#">APP下载</a>
</ul>

原理：html会自动补不闭合的标签

四、设置负边距

li+li {
  margin-left: -3px;
}

原理：设置负边距，清除空白。
缺点：无法兼容所有浏览器，每个浏览器的边距可能不一样。