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

      編輯Tag賺U幣
      教程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í)候需要用到,至今也沒有碰到過。
        

      來源:無憂整理//所屬分類:Div+CSS教程/更新時(shí)間:2007-08-16
      相關(guān)Div+CSS教程