margin外邊距屬性在inline內(nèi)聯(lián)元素中應(yīng)用的測試！_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)同意，謝絕轉(zhuǎn)載！

　　我們往往對塊元素（block element）應(yīng)用外邊距屬性margin，以期對塊元素進(jìn)行更好的控制，同時(shí)也可以應(yīng)用此屬性將塊元素定位在預(yù)想的位置。假如對內(nèi)聯(lián)元素（inline element）應(yīng)用外邊距屬性margin，會是何效果呢？我們今天就此問題，展開一些小測試。希望大家在以后的編碼中，可以記住這些效果，更好的加以利用。

　　我們首先測試一下，在內(nèi)聯(lián)元素中垂直方向上應(yīng)用margin屬性會是何效果：

代碼調(diào)試框 [www.wf0088.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

代碼調(diào)試框 [www.wf0088.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　我們通過運(yùn)行發(fā)現(xiàn)，文本“MB5U.com”在垂直方向上沒有發(fā)生任何變化，margin不能改變它的行高，也改變不了它在垂直方向上的位置。我們將margin-top改成margin-bottom將會得到同樣的效果。

　　那么內(nèi)聯(lián)元素中水平方向上應(yīng)用margin屬性會是何效果呢：

代碼調(diào)試框 [www.wf0088.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

代碼調(diào)試框 [www.wf0088.com]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　通過上面的運(yùn)行結(jié)果，我們可以了解到，在水平方向上對內(nèi)聯(lián)元素應(yīng)用margin屬性，得到的結(jié)果與在塊元素上應(yīng)用margin屬性的效果是一致的。也就是說水平方向上我們得到了外邊距而垂直方向上沒有任何改變。
　　
--------------------------------------------------------------------------------------------
補(bǔ)充： [感謝：purecss]

　　“沒有任何改變”應(yīng)該明確的說是在視覺上沒有任何改變，引用《CSS權(quán)威指南》中的一段話：

示例代碼 [www.wf0088.com]

　　設(shè)置內(nèi)聯(lián)元素的上下邊界是規(guī)范所答應(yīng)的，但顯然它對行的高度沒有影響，且由于邊辦效果是透明的，沒有任何的視覺影響。這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變元素的行高度。（能夠改變只含文本的行間距的屬性只有l(wèi)ine-height,font-size,vertical-align.）這只是對內(nèi)聯(lián)元素的頂端和底端而言的。

　　還為我們常認(rèn)為的內(nèi)聯(lián)元素不支持上下補(bǔ)白錯(cuò)誤關(guān)點(diǎn)原因和這個(gè)邊界的原因是一樣的。至于內(nèi)聯(lián)元素邊界什么時(shí)候需要用到，至今也沒有碰到過。
　　