外邊距摺疊的幾種情況：
1、當乙個元素出現在另乙個元素上面時，第乙個元素的底外邊距和第二個元素的頂外邊距發生疊加，效果圖如下：
ps：這裡的元素特質塊級元素，inline元素豎向margin無效，display為inline-block的元素觸發了bfc也不會出現疊加，input，img之類的行內替換元素也不會疊加
2、當乙個元素包含在另乙個元素中時，他們的頂和底外邊距也會發生疊加，如下圖
3、外邊距也可以和本身發生疊加，前提有三個：空元素，有外邊距，無內邊距/邊框
ps：這條出現的情況比較難看直觀的看出來，所以不太好理解
看下面兩段**：
通過chrome控制台可以看出，外邊距並沒有疊加spana的位置不是在emptydiv下方50px的地方，而是30px的位置
通過chrome控制台可以看出，外邊距並沒有疊加此時spana的位置就在emptydiv下方20px的地方，因為上下邊距疊加了
4、如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併，前提有四個：空元素，有外邊距，無內邊距/邊框，存在多個元素
看兩段**：
通過chrome控制台可以看出，divb被放置在emptydiv下方30px的地方（只看這段你可能會認為是divb的上邊距和emptydiv的下邊距疊加了，其實不是這樣的），再結合下一段**你就能完全明白了
通過chrome控制台可以看出，divb被放置在emptydiv下方50px的地方，如果用「divb的上邊距和emptydiv的下邊距疊加了」理解，divb將被放置在80px的地方，事實上這裡只顯示出了50px，原因就是emptydiv的上下邊距發生的疊加。你也可以通過給emptydiv加個邊框，再去掉會明顯看到divb位置的變化。
前端小知識點
1 自呼叫方法 function jquery 這裡把jquery傳遞給 其實是方便你使用 符號而不是jquery關鍵字 2 閉包 函式用到外部變數，不需要傳參就可以獲取 3 extend jquery.extend 函式用於將乙個或者多個物件的內容合併到目標物件。extend dest,src1,...
前端小知識點
列表項前面標註 span值個數分別為1個 2個 3個 4個 1 margin 上 右 下 左 2 margin 上 下 左 右 3 margin 上 左 右 下 4 margin 上 右 下 左 順時針 html特殊字元編碼對照表 賬號前後不能含空格 let spacereg s s 賬號名稱不能含...
HTML中margin外邊距的基本知識點
margin 外邊距可以改變盒子和盒子之間的距離,在進行布局時,遵循以下原則,從上往下 從左往右 設定margin top會將盒子自身往下推 margin bottom會將與其相鄰同級元素向下推,一般我們在布局同級元素之間優先使用margin top來按照從上往下的原則進行樣式設定 設定margin...