?
關于margin:
在需要border外側添加距離時。
空白處不需要背景時。
相連的兩個部分的地方需要加外邊的邊距時使用。
關于padding:
在需要border內側添加距離時。
空白處需要背景時。
相連的兩個部分的地方需要加內部的邊距時使用。
?
?
IE6中雙邊距Bug:
發生場合:當給父元素內第一個浮動元素設置margin-left(元素float:left)或margin-right(元素float:right)時margin加倍。
解決方法:是給浮動元素加上display:inline;CSS屬性;或者用padding-left代替margin-left。
IE6中浮動元素3px間隔Bug:
?
發生場合:發生在一個元素浮動,然后一個不浮動的元素自然上浮與之靠近會出現的3px的bug。
解決方法:右邊元素也一起浮動;或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。
IE6/7負margin隱藏Bug:
?
發生場合:當給一個有hasLayout的父元素內的非hasLayout元素設置負marin時,超出父元素部分不可見。
解決方法:去掉父元素的hasLayout;或者賦hasLayout給子元素,并添加position:relative;
IE6/7下ul/ol標記消失bug:
?
發生場合:當ul/ol觸發了haslayout并且是在ul/ol上寫margin-left,前面默認的ul/ol標記會消失。
解決方法:給li設置margin-left,而不是給ul/ol設置margin-left。
IE6/7下margin與absolute元素重疊bug:
?
發生場合:雙欄自適應布局中,左側元素absolute絕對定位,右側的margin撐開距離定位。在IE6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。
解決方法:把左側塊級元素更改為內聯元素,比如把div更換為span。
IE6/7/8下auto margin居中bug:
?
發生場合:給block元素設置margin auto無法居中
解決方法:出現這種bug的原因通常是沒有Doctype,然后觸發了ie的quirks mode,加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個width能夠解決,但根據本人親測,加 with此種方法是無效的,如果沒有Doctype即使給元素添加width也無法讓block元素居中。
IE8下input[button | submit] 設置margin:auto無法居中bug:
?
發生場合:ie8下,如果給像button這樣的標簽(如button input[type="button"] input[type="submit"])設置{ display: block; margin:0 auto; }如果不設置寬度的話無法居中。
解決方法:可以給為input加上寬度
IE8百分比padding垂直margin bug:
?
發生場合:當父元素設置了百分比的padding,子元素有垂直的margin的時候,就好像父元素被設置了margin一樣。
解決方法:給父元素加一個overflow:hidden/auto。
?
?