在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

有一个点，大家应该都知道，子元素在水平方向上margin值始终都是能够隔离父元素的。然而子元素在垂直方向上默认无法隔离父元素。说到这，可以有人有点蒙圈， 看一个demo：

上面这个例子中， 可以看出，父元素（背景是红色）并没有被子元素的margin值撑开，反而子元素的marign值和父元素的margin值产生的合并。这一切都是正常现象。

本文给大家提供一些方法来将子元素隔离父元素。

方法一：父元素是BFC元素

父元素：overflow:hidden

方法二：父元素拥有border

父元素：border：solid

方法三：父元素拥有padding

父元素：padding：20px 0

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

父元素：display：inline-block

最后总结一下：

让子元素在垂直方向上的margin隔离父元素，可能还有其他方法，但这应该是最常用的几种方法。将需要角度来看，有时，隔离也许就是我们想要的。