最詳細的div邊距合並的問題和解決方法
對於前端來說寫頁面是最基礎的東西了，但是想不到還是有人不理解邊距合並的問題，昨天有網友問我為什麽設置的margin不是我設置的實際效果？
好吧，廢話不多說，下面來說一下關於margin合並的問題。
解決margin合並的方法有好多種：
首先說一下嵌套關系的margin合並問題。
1.給父元素添加padding-top值和padding-bottom值
2.給父元素添加border值
3.給父元素添加屬性overflow:hidden
4.給父元素或者子元素聲明浮動float
5.給父元素添加屬性： positon:relative，給子元素聲明絕對定位position:absolute
6.給父元素或子元素聲明絕對定位：position:absolute
在這裏的父級div是a01，嵌套著子級div a02,如果在沒有設置a01的合並解決方式的時候就會發生margin合並。如圖
要解決這個問題，可以這樣做(overflow:hidden)
可以說這個是最方便簡單的了，一行代碼搞定。
效果圖：
還可以這樣寫：(padding-top和padding-bottom)
利用padding來設置效果也是一樣的，開發是時候也是比較常用的，因為如果想讓上或下某一邊有邊距合並，這樣設置就可以控制了。
雖然overflow:hidden很方便，但是不要固定死一個方法，這兩個方法是在實際開發解決用得比較多的。
當然還可以這樣：(border)
效果圖：
還可以這樣：（給父元素float）
效果圖：
還可以這樣：（給子級元素float）
效果圖：
還可以這樣：（給父元素添加position）
效果圖：
還可以這樣：（給子元素添加position）
效果圖：
還可以這樣：（給父元素添加屬性： positon:relative，給子元素聲明絕對定位position:absolute）
效果圖：
接下來是：
沒有嵌套關系的margin合並問題
當兩個元素沒有嵌套關系的時候（即兄弟關系），不管是否有border或者overflow屬性時，兩者始終會存在外邊距合並問題。
在使用的時候記得取的是最大值。
效果圖：
好了，到這裏應該你也了解了邊距合並問題和怎麽去解決它了，如果有什麽地方表達得不夠清楚的，歡迎留言，我一定第一時間改進。
最詳細的div邊距合並的問題和解決方法