inline-block 的 div 之间的空隙，原因及解决

inline-block 的 div 之间的空隙，原因及解决

inline-block布局的元素在编辑器里不在同一行，即存在换行符，这就是著名的inline-block“换行 符/空格间隙问题”。

解决办法：

1、把img标签的display属性改成block：

img{dispaly:block;}

2、把div中的字体大小设为0：

div{font-size:0;}

3、如果是img，修改img的vertical-align属性：

img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}

4、移除标签间的空格

<ul>
    <li>这是一个li</li><li>这是另一个li</li><li>这是另另一个li</li><li>这是另另另一个li</li>
</ul>

// 方式二：在标签结束处消除换行符
<ul>
    <li>这是一个li
    </li><li>这是另一个li
    </li><li>这是另另一个li
    </li><li>这是另另另一个li</li>
</ul>

// 方式三：HTML注释标签
<ul>
    <li>这是一个li</li><!--
    --><li>这是另一个li</li><!--
    --><li>这是另另一个li</li><!--
    --><li>这是另另另一个li</li>
</ul>

第四个方法明显有点不雅观，而且影响页面代码可观性，不推荐。