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

結語：暫時這麼多。