|
margin在塊元素、內(nèi)聯(lián)元素中的區(qū)別
HTML（這里說(shuō)的是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)的主要差別在于，在頁(yè)面文檔中block元素另起一行開(kāi)始，并獨(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)元素）大致有：#PCDATA（即文本）| 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 中沒(méi)有給出明確的定義，但我們從字面可以理解到，非置換元素對(duì)應(yīng)著置換元素（replaced element），也就是說(shuō)我們搞懂了置換元素的含義，就懂了非置換元素。置換元素，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而父元素又沒(méi)有設(shè)定 padding-top/border-top的話要需要印證上面的垂直外邊距合并的知識(shí)）
margin也能用于內(nèi)聯(lián)元素，這是規(guī)范所允許的，但是margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒(méi)有影響，并且由于邊界效果(margin效果)是透明的，他也沒(méi)有任何的視覺(jué)影響。
這是因?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元素一行的高呢？這都說(shuō)不準(zhǔn)，所以統(tǒng)一都給每行定一個(gè)高，只能是line-height了。
margin-top/margin-bottom對(duì)內(nèi)聯(lián)元素沒(méi)有多大實(shí)際效果，不過(guò)margin-left/margin-right還是能夠?qū)?nèi)聯(lián)元素產(chǎn)生影響的。應(yīng)用margin:10px 20px 30px 40px;，左邊這個(gè)css如果寫在inline元素上，他的效果大致是，上下無(wú)效果，左邊離他相鄰元素或者文本距離為40px，右邊離他相鄰元素或者文本距離為20px。你可以自行嘗試一番。
最后在內(nèi)聯(lián)元素中還有上文我們提到的非可置換inline元素（non-replaced element），這些個(gè)元素img|input|select|textarea|button|label雖然是內(nèi)聯(lián)元素，但margin依舊可以影響到他的上下左右！
總結(jié)下來(lái)margin 屬性可以應(yīng)用于幾乎所有的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，而且垂直外邊距對(duì)非置換內(nèi)聯(lián)元素（non-replaced inline element）不起作用。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 不要告訴我你懂margin [2] 下一頁(yè) 不要告訴我你懂margin [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 不要告訴我你懂margin [3]
