问题描述及造成原因

我们给块元素例如 div 设置 display:inline-block，会发现元素之间存在空隙。原因是所有元素都自带的 white-space 属性在起作用。默认行为就是把换行变成空格。也就是这里的间隙实际上是来自 div 和 div 之间的换行转变成空格导致的。

解决方法

1. 写 div 的时候不要换行，而是紧贴着写。

虽然可以解决问题，但如果 div 内容比较复杂，不换行格式会很难看。而且不能格式化代码。而且你自己可能都会忘记自己做过处理，因为很不明显。

2. 设置父元素的 font-size 为 0

属于投机取巧的办法。可以解决问题。但父元素不能有文本内容。可以包裹一个空的父元素，就为了解决这个问题。
但是，font-size 为 0 会被子元素继承。需要重新设置子元素的 font-size。而且会出现下面元素下移的情况。这时候，你需要给每个子元素设置 vertical-align:top; 才能解决这个问题。非常的麻烦。

3. 使用注释换行方式

使用 <!----> 注释的方式解决，在两个块中间添加空注释，注释中内容仅有一个换行，这时换行在注释中不会对页面产生影响，并且代码从视觉上来说结构是美观的。

<div></div><!--
--><div></div>

这种方法是在网上看到一位北大的博主在自己的博客页面中使用的，真的是非常聪明。