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

结语：暂时这么多。