html中padding和margin的区别和用法与存在的bug消除
?
關(guān)于margin：
在需要border外側(cè)添加距離時(shí)。
空白處不需要背景時(shí)。
相連的兩個(gè)部分的地方需要加外邊的邊距時(shí)使用。
關(guān)于padding：
在需要border內(nèi)側(cè)添加距離時(shí)。
空白處需要背景時(shí)。
相連的兩個(gè)部分的地方需要加內(nèi)部的邊距時(shí)使用。
?
?
IE6中雙邊距Bug：
發(fā)生場合：當(dāng)給父元素內(nèi)第一個(gè)浮動(dòng)元素設(shè)置margin-left(元素float:left)或margin-right(元素float:right)時(shí)margin加倍。
解決方法：是給浮動(dòng)元素加上display:inline;CSS屬性;或者用padding-left代替margin-left。
IE6中浮動(dòng)元素3px間隔Bug：
?
發(fā)生場合：發(fā)生在一個(gè)元素浮動(dòng)，然后一個(gè)不浮動(dòng)的元素自然上浮與之靠近會(huì)出現(xiàn)的3px的bug。
解決方法：右邊元素也一起浮動(dòng);或者為右邊元素添加IE6 Hack _margin-left:-3px;從而消除3px間距。
IE6/7負(fù)margin隱藏Bug：
?
發(fā)生場合：當(dāng)給一個(gè)有hasLayout的父元素內(nèi)的非hasLayout元素設(shè)置負(fù)marin時(shí)，超出父元素部分不可見。
解決方法：去掉父元素的hasLayout;或者賦hasLayout給子元素,并添加position:relative;
IE6/7下ul/ol標(biāo)記消失bug：
?
發(fā)生場合：當(dāng)ul/ol觸發(fā)了haslayout并且是在ul/ol上寫margin-left，前面默認(rèn)的ul/ol標(biāo)記會(huì)消失。
解決方法：給li設(shè)置margin-left，而不是給ul/ol設(shè)置margin-left。
IE6/7下margin與absolute元素重疊bug：
?
發(fā)生場合：雙欄自適應(yīng)布局中，左側(cè)元素absolute絕對(duì)定位，右側(cè)的margin撐開距離定位。在IE6/7下左側(cè)應(yīng)用了absolute屬性的塊級(jí)元素與右邊的自適應(yīng)的文字內(nèi)容重疊。
解決方法：把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把div更換為span。
IE6/7/8下auto margin居中bug：
?
發(fā)生場合：給block元素設(shè)置margin auto無法居中
解決方法：出現(xiàn)這種bug的原因通常是沒有Doctype，然后觸發(fā)了ie的quirks mode，加上Doctype聲明就可以了。在《打敗IE的葵花寶典》里給出的方法是給block元素添加一個(gè)width能夠解決，但根據(jù)本人親測，加 with此種方法是無效的，如果沒有Doctype即使給元素添加width也無法讓block元素居中。
IE8下input[button | submit] 設(shè)置margin:auto無法居中bug：
?
發(fā)生場合：ie8下，如果給像button這樣的標(biāo)簽(如button input[type="button"] input[type="submit"])設(shè)置{ display: block; margin:0 auto; }如果不設(shè)置寬度的話無法居中。
解決方法：可以給為input加上寬度
IE8百分比padding垂直margin bug：
?
發(fā)生場合：當(dāng)父元素設(shè)置了百分比的padding，子元素有垂直的margin的時(shí)候，就好像父元素被設(shè)置了margin一樣。
解決方法：給父元素加一個(gè)overflow:hidden/auto。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/LastFire/p/8185562.html
總結(jié)
以上是生活随笔為你收集整理的html中padding和margin的区别和用法与存在的bug消除的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java基础5一数组的常见应用算法
- 下一篇： appium GUI介绍