margin塌陷 margin合併

2021-10-01 16:54:00 字數 631 閱讀 1005

原理:父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。

正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。

但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。

原理:兩個兄弟結構的元素在垂直方向上的margin是合併的

class

=>

class

="content"

>

div>

div>

class

="box1"

>

123span

>

class

="box2"

>

234span

>

class

="demo1"

>

1div

>

class

="demo2"

>

2div

>

.content

.box1

.box2

.demo1

.demo2

margin塌陷以 及 margin合併

3.乙個空元素,沒有border和padding 3.margin合併解決方法 總結 margin 合併就是,當兩個垂直margin相遇時,它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...

margin塌陷 margin合併的解決

父子巢狀元素垂直方向的 margin,父子元素是結合在一起的,他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位,子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時,子級沒有相對於父級定位,就像父級的棚子沒有了一樣子級相對於父級,就像塌陷了一樣 a.給父元...

margin塌陷和margin合併問題及解決方案

父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...