CSS篇之inline-block

今天写代码时遇到当设置inline-block的元素有内容时总有部分掉下去的感受。

代码：

<p><i></i><span>主页</span></p>

i{display: inline-block;width: 20px;height: 20px;background: url(homepage.svg) no-repeat;}
span{display: inline-block;width:50px;height: 20px;}

like this:

缘由：

对于inline-block元素，若是里面没有inline内联元素，或者overflow不是visible，那么这个元素的基线baseline就是其margin底边缘，不然，它的baseline就是元素包含的内容中最后一行内联元素的基线。

在此例中i中没有内联元素，因此baseline就是margin下边缘，span中有内容“主页”，因此是之内容的baseline(“主页”的下边缘)做为本身的baseline。

方法：

1.添加：

i,span{vertical-align:top;}

2.添加:

span{overflow:hidden;}

缘由：设置overflow:hidden之因此能解决这个问题，是由于overflow:hidden的设置使其内容产生了BFC，受BFC之间互不影响这一特性，因此再也不由于文字而下落。

效果：

拓展：

1.vertical-algin是一个应用于行内元素和表格单元的属性，默认值是baseline。
baseline是要求该元素的基线与其父元素的基线对齐。

2.BFC相关内容连接：BFC

结语：暂时这么多。