DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 談談對css屬性margin的理解
談談對css屬性margin的理解
編輯:前端技巧     
1.margin是什麼?
margin用於控制元素周圍空間的間隔,從視覺上達到空間間隔的目的。相對於前一個元素有相應的外邊距。用於隔開元素與元素的。始終是透明的。

2.外邊距的合並問題(參見w3school)---前提:元素出於文檔流中
2.1 兩個垂直外邊距相遇時,在垂直方向上會發生外邊距的疊加,最終的外邊距等於二者的較大值;
2.2 當一個元素(沒有邊框和內邊距)包含另外一個元素時,將在垂直方向上發生疊加;
2.3 當一個元素為空元素時(且沒有外邊距和),自身會發生外邊距的疊加

3.margin在塊元素和行內元素中的區別
margin在塊元素中會影響塊元素的上下左右,可以隨意控制;而在內聯元素中則只會對水平方向上的元素起到左右。
備注:可置換的內聯元素,例如img、input、textarea、select、button、label等,可以控制其width、height,變現為display:inline-block。所以margin也可以實現上下左右的控制。

4.跟margin有關的常見bug
4.1 IE6 雙邊距問題
問題描述:當父元素中包含的第一個元素為浮動元素,會出現雙邊距的問題;
解決辦法: display:inline
4.2 iIE6浮動元素3px間隔
問題描述:一個浮動元素,另外一個為非浮動元素,則非浮動元素與浮動元素之間存在3px的間隔

5.padding與margin的區別
padding位於邊框的內部,具有背景的顏色,主要用於隔開內容與元素;而margin位於邊框的外部,不具有背景顏色,主要用於區分元素與元素,起到隔離的作用。

6.margin的負邊距問題(待續)
使用margin的負邊距可以解決很多問題。

參考資料
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved