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元素（相對(duì)而言，稱non-replaced element）是：這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性。他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。

或許有朋友對(duì)非置換元素（non-replaced element）有點(diǎn)疑惑，稍微幫助大家理解一下。非置換元素，W3C 中沒有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replaced element），也就是說我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，W3C中給出了定義：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

從定義中我們可以理解到，置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認(rèn)就有 CSS 格式化外表范圍的元素。進(jìn)而可知，非置換元素（non-replaced element）就是除了 img, input, textarea, select, object 等置換元素以外的元素。

margin在塊級(jí)元素下，他的性能可以完全體現(xiàn)，上下左右任你設(shè)定。且記住塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的元素有margin距離。如果元素是第一個(gè)元素，則就是相對(duì)于父元素的margin距離（但第一個(gè)元素相對(duì)于父元素margin-top而父元素又沒有設(shè)定padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識(shí)）。

margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒有影響，并且由于邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。這是因?yàn)檫吔鐟?yīng)用于內(nèi)聯(lián)元素時(shí)不改變?cè)氐男懈叨?，如果你要改變?nèi)聯(lián)元素的行高即類似文本的行間距，那么你只能使用這三個(gè)屬性：line-height，fong-size，vertical-align。請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height，因?yàn)閮?nèi)聯(lián)元素是一行行的，定一個(gè)height的話，那這到底是整段inline元素的高呢？還是inline元素一行的高呢？這都說不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高，只能是line-height了。margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒有多大實(shí)際效果，不過margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。應(yīng)用margin:10px 20px 30px 40px;，左邊這個(gè)css如果寫在inline元素上，他的效果大致是，上下無效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。

最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素（non-replaced element），這些個(gè)元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素，但margin依舊可以影響到他的上下左右！

總結(jié)下來margin 屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。