我们大家在初学css布局html页面结构的时候，肯定会经常使用到“margin”外边距这个属性，这个属性对我们的页面布局十分有用，也十分方便，但是这个属性在使用的时候经常会出现一些奇特的现象，导致我们的页面布局和想要完成的布局效果不一样，因此我们得了解一下它在哪些情况下会出现一些特殊情况，导致页面布局效果出现偏差。

一.正常现象

水平布局的两个盒子，同时给他们左右margin值，它们的外边距互不影响，最终的距离为左右外边距之和。

二.合并现象

垂直布局的两个块级元素，同时给它们设置上下margin值，它们的margin值会合并，最终距离为margin的最大值。

三.塌陷现象

互相嵌套的块级元素，我们给子元素设置的margin-top会作用到父元素身上，这种现象就叫块级嵌套元素塌陷现象，这也是我们实际布局时很容易就碰到的现象。

碰到这种现象我们怎么解决呢，解决办法有好几种：

1.给父元素设置padding-top或border-top2.给父元素设置overflow:hidden;3.把子元素设置为行内块元素，行内块元素不存在塌陷问题4.设置浮动或者设置绝对定位、相对定位，浮动、绝对定位或相对定位的盒子不存在塌陷问题。 这里只给大家演示一种解决办法，其他办法大家可以自己去试一下：

四.行内元素设置上下外边距无效

行内元素设置的水平左右外边距是有效的，但是设置垂直的上下外边距是无效的。

这里演示将它们转化为块级元素的解决办法：

总结：

总的来说，我们在使用margin的时候还是要时刻注意一下这四种现象，特别是块级嵌套元素的塌陷现象,在我们使用margin来进行页面布局的时候很容易就出现塌陷现象，因此我们推荐在给父子元素之间设置距离的时候，最好使用padding，在兄弟元素之间设置距离的时候再使用margin，这样就能有效避免上述所出现的问题。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享