父子巢狀元素垂直方向的 margin，
父子元素是結合在一起的，
他們兩個會取其中最大的值
正常情況應該是父級相對於瀏覽器進行定位，
子級應該相對於父級定位的
但是 margin 塌陷是在父級相對於瀏覽器進行定位時，
子級沒有相對於父級定位，
就像父級的棚子沒有了一樣子級相對於父級，
就像塌陷了一樣
a.給父元素設定邊框屬性
b.將原本設定給子元素的margin屬性修改為設定父元素的padding
c.給父子級其中乙個設定浮動屬性
d.給父子級其中乙個設定position：absolute；屬性
e.給父元素新增overflow: hidden;屬性
f.給父子級元素其中乙個設定display：inline-block；屬性
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*div
div p
style
>
head
>
>
>
>
p>
div>
body
>
html
>
合併規則：
1）如果兩個資料均為正數，取絕對值較大的乙個
2）如果兩個資料均為負數，取絕對值較大的乙個
3）如果兩個數值一正一負，直接相加
a.將本應該設定給兩個元素的外邊距直接設定給乙個元素
b.將其中乙個元素放入div中，該div設定overflow：hidden；
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*.green
.red
.demo1
.demo2
style
>
head
>
>
class
="green"
>
123span
>
class
="red"
>
234span
>
class
=>
class
="demo1"
>
1div
>
div>
class
="demo2"
>
2div
>
body
>
html
>
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷以 及 margin合併
3.乙個空元素，沒有border和padding 3.margin合併解決方法 總結 margin 合併就是，當兩個垂直margin相遇時，它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...