點擊右上方紅色按鈕關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

有一個點，大家應該都知道，子元素在水平方向上margin值始終都是能夠隔離父元素的。然而子元素在垂直方向上默認無法隔離父元素。說到這，可以有人有點蒙圈， 看一個demo：

上面這個例子中， 可以看出，父元素（背景是紅色）並沒有被子元素的margin值撐開，反而子元素的marign值和父元素的margin值產生的合併。這一切都是正常現象。

本文給大家提供一些方法來將子元素隔離父元素。

方法一：父元素是BFC元素

父元素：overflow:hidden

方法二：父元素擁有border

父元素：border：solid

方法三：父元素擁有padding

父元素：padding：20px 0

方法四：父元素是可置換元素

父元素：display：inline-block

最後總結一下：

讓子元素在垂直方向上的margin隔離父元素，可能還有其他方法，但這應該是最常用的幾種方法。將需要角度來看，有時，隔離也許就是我們想要的。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！