你好，inline-block

今天在作佈局的時候，遇到個納悶的問題。

我想將一個div塊水平分爲寬50%的兩部分，分別爲兩個連接按鈕，HTML代碼以下：

<div id="wrap">
    <a href="" class="link1">link1</a>
    <a href="" class="link2">link2</a>
</div>

天然而然想到了用display:inline-block來觸發layout又不換行；

a{
    display:inline-block;
    width:50%;
　　...
}

可是結果卻令我大跌眼鏡：

　

我給div設了width=400，每一個a的width爲50%，但並無像預期的，水平排列，在Chrome下審查元素，看到的佈局結果是：width=200, no padding, no border, no margin, no no no~~~

納悶的Demo→: http://jsbin.com/bemojoki/4/edit

·

後來查了一下資料，原來是這個inline-block，我一直沒正真瞭解過~

回滾到最頂看HTML代碼，兩個a標籤沒有寫在同一行，換行符、空格符、製表符等，在瀏覽器中會被摺合爲一個空白符，而inline-block具備inline的特性，默認狀況下有空隙，這個空隙就是空白符。所謂的符號就是字符，因此大小會受font-size影響，所以，上面這個納悶的問題，能夠用{font-size:0;}來解決了。

具體Demo→：http://jsbin.com/bemojoki/10/edit

 

============================華麗麗的分隔線============================

inline-block前世此生，傳送門：http://ued.taobao.org/blog/2012/08/inline-block/