Html 雙邊距問題

2021-07-08 18:24:44 字數 674 閱讀 8536

ie6中雙邊距bug:

發生場合:當給父元素內第乙個浮動元素設定

margin-left(元素float:left)或margin-right(元素float:right)時margin

加倍。

解決方法:是給浮動元素加上

display:inline;

css屬性;或者用padding-left代替margin-left。

原理分析:塊級物件預設的display屬性值是block,當設定了浮動的同時,還設定了它的外邊距就會出現這種情況。也許你會問:「為什麼之後的物件和第乙個物件之間就不存在雙倍邊距的bug」?因為浮動都有其相對應的物件,只有相對於其父物件的浮動物件才會出現這樣的問題。第乙個物件是相對父物件的,而之後物件是相對第乙個物件的,所以之後物件在設定後不會出現問題。為什麼display:inline可以解決這個雙邊距bug,首先是inline元素或inline-block元素是不存在雙邊距問題的。然後,float:left等浮動屬性可以讓inline元素haslayout,會讓inline元素表現得跟inline-block元素的特性一樣,支援高寬,垂直margin和padding等,所以div class的所有樣式可以用在這個display inline的元素上。

雙邊距重疊問題

行元素 不會獨佔一行,width和height會失效,並且在垂直方向的padding和margin也會失效。塊元素 佔據一行,並且自動填滿父元素,可以設定margin,padding,高和寬。多個相鄰,普通流的塊元素垂直方向的margin重疊。html 第乙個盒子 第二個盒子 css div1 di...

html 父子外邊距 兄弟內邊距 趣味邊框

理解父子之間用padding,兄弟之間用margin。圖中外部div a 裡面包含兩個div b和c 均為父子元素之間的間距 為兄弟之間的元素 使用 父子內邊距,兄弟外邊距 父子元素之間的空隙,均使用padding值撐開。兄弟之間使用margin值撐開。a元素 witdth 200px paddin...

IE6雙邊距bug及其解決辦法

無標題文件 title style type text css body,div div1 div2 style head body div id div1 div div id div2 div body html 上面這段 在ie6和ff中的顯示結果分別如下圖所示 可以看到,在ie6中顯示的紅色...