margin问题

目录

1.margin塌陷问题

2.margin合并问题 

---

margin问题分为两种：1.margin塌陷问题 2.margin合并问题

1.margin塌陷问题

在HTML/CSS布局中我们经常会遇到各种各样的“塌陷”问题。

何为“塌陷问题”？

   通俗的讲就是在元素布局时添加的某些布局属性无法正确的按照期望的那样显示出来。比如：平时设置子元素高度一般情况下可以撑开未设置高度的父元素，但是子元素如果设置了float元素之后就会导致未设置高度的父元素消失。

今天我们先讲一下margin塌陷问题。

      第一个子元素的上margin会作用在父元素上，最后一个元素的下margin会作用在父元素上。

举例：

    将两个不同颜色的正方形放在一个div中，两个正方形的之间的间距为50px,并且为粉色正方形设置50px的上外边距，橘色正方形设置50px的下外边距。观察结果：

出现的效果图为：

                                    

我们期望出现的效果图：

                                     

分析：

                                     

这就是margin塌陷问题，他的解决方案：

1.给父元素设置不为0的padding

2.给父元素设置宽度不为零的border,(然后将边框颜色改为transparent)

3.给父元素添加样式overflow:hidden.(推荐)

注意：前两个影响了盒子模型，因此我不推荐使用，我们可以选择第三种。

其实我们有专门解决高度塌陷问题的方法，后续会为大家介绍BFC。这篇博客主要是给大家解释一下margin塌陷。

2.margin合并问题 

         上一个兄弟元素的下外边距和下面这个兄弟的上外边距会合并，取其中最大的一个当做外边距，不会将两个外边距进行相加。

    将两个不同颜色的正方形放在一个div中，并且为粉色正方形设置60px的下外边距，橘色正方形设置50px的上外边距。观察结果：

出现的效果图为：

                                     

我们期望出现的效果图：

                                     

分析：这就是margin的合并问题，对于这个问题我们无需解决，在布局时直接设置一个属性即可，比如：给橘色正方形添加一个属性  margin-top：110px;即可。