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