網(wǎng)站制作css技術(shù)之margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別
HTML(這里說的是html標(biāo)準(zhǔn),而不是xhtml)里分兩種基本元素,即block和inline。顧名思義,block元素就是以”塊”表現(xiàn)的元素(block-like elements),inline元素即是以”行”表現(xiàn)的元素(character level elements and text strings)。二者表現(xiàn)的主要差別在于,在頁面文檔中block元素另起一行開始,并獨(dú)占一行。inline元素則同其他inline元素共處一行。
block元素(塊元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(隨著html5標(biāo)準(zhǔn)的推進(jìn),一些元素將被廢除,而一些新的元素將被引入)注意的是并非所有的block元素的默認(rèn)display屬性都是block,像table這種display:table的元素也是block元素。
inline元素(內(nèi)聯(lián)元素)大致有:| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON
其中有類特殊的元素:如img|input|select|textarea|button|label等,他們被稱為可置換元素(Replaced element)。他們區(qū)別一般inline元素(相對而言,稱non-replaced element)是:這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。
margin在塊級元素下,他的性能可以完全體現(xiàn),上下左右任你設(shè)定。且記住塊級元素的margin的參照基準(zhǔn)是前一個元素即相對于自身之前的元素有margin距離。如果元素是第一個元素,則就是相對于父元素的margin距離(但第一個元素相對于父元素margin-top而父元素又沒有設(shè)定padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識)。
margin也能用于內(nèi)聯(lián)元素,這是規(guī)范所允許的,但是margin-top和margin-bottom對內(nèi)聯(lián)元素(對行)的高度沒有影響,并且由于邊界效果(margin效果)是透明的,他也沒有任何的視覺影響。這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變元素的行高度,如果你要改變內(nèi)聯(lián)元素的行高即類似文本的行間距,那么你只能使用這三個屬性:line-height,fong-size,vertical-align。請記住,這個影響內(nèi)聯(lián)元素高度的是line-height而不是height,因?yàn)閮?nèi)聯(lián)元素是一行行的,定一個height的話,那這到底是整段inline元素的高呢?還是inline元素一行的高呢?這都說不準(zhǔn),所以統(tǒng)一都給每行定一個高,只能是line-height了。margin-top/margin-bottom對內(nèi)聯(lián)元素沒有多大實(shí)際效果,不過margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。應(yīng)用margin:10px 20px 30px 40px;,左邊這個css如果寫在inline元素上,他的效果大致是,上下無效果,左邊離他相鄰元素或者文本距離為40px,右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。
最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素(non-replaced element),這些個元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素,但margin依舊可以影響到他的上下左右!
總結(jié)下來margin 屬性可以應(yīng)用于幾乎所有的元素,除了表格顯示類型(不包括 table-caption, table and inline-table)的元素,而且垂直外邊距對非置換內(nèi)聯(lián)元素(non-replaced inline element)不起作用。