css: display:inline-block的几个问题

display:inline-block使用起来有几个问题，这里总结一下。

1.inline-block元素即使没有内容，父元素也会被撑开.

用以下代码设置元素样式：

效果：

虽然内部的div没有任何内容，而且审查元素的高度为0，但是父元素被撑开了。

原因：

inline-block的元素 没有内容的时候，父元素会根据 font 产生一个 line-height 来产生一个空白块。比如本例中，字体大小是16px，因此浏览器的默认行高就是18px（比字体稍大）,因此尽管子元素没有内容，但是父div根据行高计算的高度是18px。

解决方法：

class="parent" style="font-size: 0;">
    <div style="display: inline-block;">
div>

详见：http://blog.csdn.net/u010552788/article/details/51943246

2.inline-block元素没有内容时，与有内容的inline-block元素不对齐，且距离父div底边有距离

比如：

.div1{
   background-color: red;
   color: white;
}
.div2{
   background-color: blue;
   display: inline-block;
   width: 30px;
   height: 20px;
}

   

abc

   

效果是这样的：

而且，即使我们去掉左边的小div，空div的底边与父div的底边还是有距离,如图

这个问题稍微复杂些，详见另一边日志：http://blog.csdn.net/mr_orange_klj/article/details/75305396

3.inline-block元素之间的水平间距:

这个问题也有一篇日志，详见：http://blog.csdn.net/mr_orange_klj/article/details/73928345