今天写代码时遇到当设置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
结语：暂时这么多。