網(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）不起作用。
