margin外邊距屬性在inline內聯(lián)元素中應用的測試！_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
版權聲明：MB5U.com原創(chuàng)，未經同意，謝絕轉載！
我們往往對塊元素（block element）應用外邊距屬性margin，以期對塊元素進行更好的控制，同時也可以應用此屬性將塊元素定位在預想的位置。假如對內聯(lián)元素（inline element）應用外邊距屬性margin，會是何效果呢？我們今天就此問題，展開一些小測試。希望大家在以后的編碼中，可以記住這些效果，更好的加以利用。
我們首先測試一下，在內聯(lián)元素中垂直方向上應用margin屬性會是何效果：
[ 可先修改部分代碼 再運行查看效果 ]
[ 可先修改部分代碼 再運行查看效果 ]
我們通過運行發(fā)現(xiàn)，文本“MB5U.com”在垂直方向上沒有發(fā)生任何變化，margin不能改變它的行高，也改變不了它在垂直方向上的位置。我們將margin-top改成margin-bottom將會得到同樣的效果。
那么內聯(lián)元素中水平方向上應用margin屬性會是何效果呢：
[ 可先修改部分代碼 再運行查看效果 ]
[ 可先修改部分代碼 再運行查看效果 ]
通過上面的運行結果，我們可以了解到，在水平方向上對內聯(lián)元素應用margin屬性，得到的結果與在塊元素上應用margin屬性的效果是一致的。也就是說水平方向上我們得到了外邊距而垂直方向上沒有任何改變。
--------------------------------------------------------------------------------------------
補充： [感謝：purecss]
“沒有任何改變”應該明確的說是在視覺上沒有任何改變，引用《CSS權威指南》中的一段話：
還為我們常認為的內聯(lián)元素不支持上下補白錯誤關點原因和這個邊界的原因是一樣的。至于內聯(lián)元素邊界什么時候需要用到，至今也沒有碰到過。
我們往往對塊元素（block element）應用外邊距屬性margin，以期對塊元素進行更好的控制，同時也可以應用此屬性將塊元素定位在預想的位置。假如對內聯(lián)元素（inline element）應用外邊距屬性margin，會是何效果呢？我們今天就此問題，展開一些小測試。希望大家在以后的編碼中，可以記住這些效果，更好的加以利用。
我們首先測試一下，在內聯(lián)元素中垂直方向上應用margin屬性會是何效果：
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
我們通過運行發(fā)現(xiàn)，文本“MB5U.com”在垂直方向上沒有發(fā)生任何變化，margin不能改變它的行高，也改變不了它在垂直方向上的位置。我們將margin-top改成margin-bottom將會得到同樣的效果。
那么內聯(lián)元素中水平方向上應用margin屬性會是何效果呢：
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
通過上面的運行結果，我們可以了解到，在水平方向上對內聯(lián)元素應用margin屬性，得到的結果與在塊元素上應用margin屬性的效果是一致的。也就是說水平方向上我們得到了外邊距而垂直方向上沒有任何改變。
--------------------------------------------------------------------------------------------
補充： [感謝：purecss]
“沒有任何改變”應該明確的說是在視覺上沒有任何改變，引用《CSS權威指南》中的一段話：
示例代碼 [www.hl5o.cn]
設置內聯(lián)元素的上下邊界是規(guī)范所答應的，但顯然它對行的高度沒有影響，且由于邊辦效果是透明的，沒有任何的視覺影響。這是因為邊界應用于內聯(lián)元素時不改變元素的行高度。（能夠改變只含文本的行間距的屬性只有l(wèi)ine-height,font-size,vertical-align.）這只是對內聯(lián)元素的頂端和底端而言的。
還為我們常認為的內聯(lián)元素不支持上下補白錯誤關點原因和這個邊界的原因是一樣的。至于內聯(lián)元素邊界什么時候需要用到，至今也沒有碰到過。
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-margin外邊距屬性在inline內聯(lián)元素中應用的測試！
。