display:inline-block使用起来有几个问题,这里总结一下。
1.inline-block元素即使没有内容,父元素也会被撑开.
用以下代码设置元素样式:
<div style="background-color: red;">
<div style="display: inline-block;background-color: blue;"></div>
</div>
效果:
虽然内部的div没有任何内容,而且审查元素的高度为0,但是父元素被撑开了。
原因:
inline-block的元素 没有内容的时候,父元素会根据 font 产生一个 line-height 来产生一个空白块。比如本例中,字体大小是16px,因此浏览器的默认行高就是18px(比字体稍大),因此尽管子元素没有内容,但是父div根据行高计算的高度是18px。
解决方法:
<div 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底边有距离
比如:
<!--css-->
.div1{
background-color: red;
color: white;
}
.div2{
background-color: blue;
display: inline-block;
width: 30px;
height: 20px;
}
<!--html-->
<div class='div1'>
<div class='div2'>abc</div>
<div class='div2'></div>
</div>
效果是这样的:
而且,即使我们去掉左边的小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