margin的塌陷現象跟合併現象

2021-08-04 12:44:10 字數 410 閱讀 7928

emmm,初學html,所以將自己所遇到的問題以及自己的解決方法給寫下來。

一、margin上邊距造成的塌陷現象

首先給出兩個為父子關係的盒子,

當子盒子加上margin-top:50px; 時就出現了問題。

當我們給子盒子加上margin-top:50px;  結果卻是父盒子也隨著子盒子的移動跟著下來,這叫塌陷現象啦。

如果我們還是需要完成子盒子距離父盒子頂部50px,

可以用兩種方法結局

1、給父盒子也就是紅色盒子加上內邊距padding-top:50px; 這跟原來想要達成的效果一樣,但是如果使用padding後不想父盒子的高產生變化就需要把原來的寬高減去50px;

2、也可以選擇給父元素加上border,也可以避免塌陷,但設定邊框後邊框會佔據空間,也應減去設定的邊框佔據的長度。

margin塌陷 margin合併

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

margin塌陷以 及 margin合併

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

margin塌陷 margin合併的解決

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