“margin”外边距的各种奇特现象

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

一.正常现象

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

两个盒子的中间间距就是它们的两个的左右外边距之和。

二.合并现象

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

本来我们是给两个盒子一个下外边距一个上外边距，照理来说两个盒子之间的距离应该为200px，可最后的效果却是只有100px，这说明两个盒子的上下外边距出现了合并现象，遇到这种情况的话，我们只能尽量避免，解决办法就是只给其中一个盒子设置margin值即可。

三.塌陷现象

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

看上面的案例，我们明明是给子元素设置的margin-top值，但是最终却父元素却也好像获得了子元素的margin-top值，导致父元素和子元素同时一起向下移动了距离，并且父元素和子元素之间的距离也没有拉开，这就是塌陷现象。

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

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

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

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

很显然，虽然已经给它们设置了上下外边距，可它们的距离并没有拉开，这就说明了给行内元素的上下的外边距并没有生效，可当我们想要让它们之间产生上下间距该怎么办呢？解决办法很简单，就是将它们转换为行内块元素或者块级元素即可。

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

总结：

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