去除inline-block造成的元素之间的空白

对多个元素使用inline-block会在元素之间填充空白文本，在显示上就是两个元素之间有间隙。
有的时候一行有两个元素当对这两个元素使用inline-block同时设置width: 50%，会出现折行，此时就是空白造成的，解决空白的几种方法：

1. 在父元素上设置font-size: 0

.inline-block-list { /* ul or ol with this class */
  font-size: 0;
}
.inline-block-list li {
  font-size: 14px; /* put the font-size back */
}

2. 添加注释

<ul>
  <li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>

3. margin

.inline-block-list li {
  margin-left: -4px;
}

4. 下移关闭标签

<ul>
   <li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>

参考链接