inline-block是结合inline和block各自特点形成的混合产物，他具备了inline的将不同元素/字符不换行排列以及block可以设置宽高，上下边距的特点。由此可见，inline-block是我们在页面的排布中的好帮手。主要分享一下我个人平时在页面布局上的一些妙用；如文中有描述不对的地方，还劳请各位同仁斧正。

inline-block之间的幽灵空隙

场景

常见导航栏里的一级菜单排布经常会用到inline-block去让他们并排显示

<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ff770f;
  border: 1px solid #000;
}

问题

此时小li们都被设置了inline-block,他们之间产生了大约5px的幽灵间隙，这是因为元素被设为inline-block之后浏览器会解析他们之间的空格。

解决方案

1.去除DOM间的空白符

可以直接去除小<li>们之间的空格达到没有空隙的效果，但这样会导致DOM结构变得可读性很差，而且在运用模版时，通常都只写一个元素，其他通过遍历进行动态渲染添加元素，无法控制元素之间是否换行。

<ul class="container">
  <li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li>
</ul>

2.font-size: 0

给小<li>们的父元素<ul>设置font-size: 0,如果只是需要显示图片不需要文字，就很Perfect了，但小<li>中需要文字信息的话，则需要重新在<li>中添加fon-size的设置。

.container {
  font-size: 0;
  background: #ff770f;
}

3.letter-spacing: -5px

给父元素<ul>设置letter-spacing: -5px;通过减少字符间距达到去除间隙的效果

.container {
  letter-spacing: -5px
  background: #ff770f;
}

以上三种方式均能做到下面的效果

其他妙用

通过上面解决幽灵空格的思路，我们可以了解到被设置了inline-block的元素，能被一些文本属性所操纵；这样我们就可以通过letter-spacing设置他们之间的间隔，如同gap和margin-left、margin-right的效果一样，抑或者通过text-indent设置元素开头的缩进量，以及vertical-align设置他们的垂直对齐方式，总而言之能在文本上应用的样式都可以用在被设置了inline-block的元素上。