外边距margin合并问题：外边距塌陷

目录

前言

一、为什么存在外边距塌陷

二、解决外边距塌陷

1.给父级的盒子制定边框线，然后设置子级盒子的外边距

2.给父元素设置内边距

3.给父元素添加overflow：hidden；

总结

三、清除内外边距

---

前言

写的时候遇到了问题，虽然自己有学但实操似乎会忘记，就把外边距塌陷的问题记录下来了。

一、为什么存在外边距塌陷

当父盒子和子盒子同时有外边距margin设置的时候，网页显示的是两者比较大的离顶部较远的那个外边距，而子盒子并不会与父盒子产生外边距，这一现象称之为塌陷。

二、解决外边距塌陷

1.给父级的盒子制定边框线，然后设置子级盒子的外边距

代码如下（示例）：

.father {
width: 200px;
height: 200px;
background-color:red;
/* 1.给父级的盒子制定边框线然后再设置子级的外边距 */
border: 1px solid transparent;
}

.son {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}

2.给父元素设置内边距

代码如下（示例）：

padding: 1px;

3.给父元素添加overflow：hidden；

这也是最常用的方法，因为此方法不会改变盒子大小

overflow: hidden;

总结

解决外边距塌陷的两种方法

1.给父级的盒子制定透明色边框线，然后设置子级盒子的外边距

2.给父元素设置内边距；

3.给父元素添加overflow：hidden（注意是给父级元素添加）；

三、清除内外边距

 *{
        margin: 0px;
        padding: 0px;
   }

当使用某些元素时，其元素本身含有内外边距，为方便布局，我们应该清除内外边距。

行内元素应尽量只设置左右内边距，而不设置上下内边距；