使用display:inline-block会产生什么问题？解决方法？

[conan1992]

问题

两个display：inline-block元素放到一起会产生一段空白。

原因

在字体大小不为0的情况下，元素之间的空白符（空格、回车换行等）占据一定宽度；

解决办法

• 设置父元素font-size为0，子元素再设置font-size
• 给元素添加float；
• 去掉回车，将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

<div class="container">
  <div class="left">
      左
  </div><div class="right">
      右
  </div>
</div>