外边距合并和塌陷问题及解决方法

1.外边距合并

​ 当两个外边距相邻时，它们会合并为较大的那一个。

​ 无论是相邻元素的上下边距，还是父子元素的上 边距，甚至是同一元素的上下边距。

​

1. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），

   它们的上和/或下外边距也会发生合并。

​

​

​ 2. 当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

​

3. 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距

   就碰到了一起，它们会发生合并。

​

​ 要如何解决外边距合并的问题

​ 1. 为父元素定义1像素的上边框。

2. 为父元素添加内边距。

3. 为父元素添加overflow:hidden; （推荐）

注意，第一种和第二种方法都不好，会撑大盒子的体积。第三种方法将溢出内容隐藏，既不增大盒子体积，也不影响内容。

2.外边距塌陷

​ 嵌套的父子盒子，子盒子需要向下移动，然后添加外边距，但是移动的却是父盒子，这就是外边距塌陷。

​ *** 图1想要让绿色的son向下移动，添加了margin-top：30px.
结果是图2的父盒子整体向下移动了margin-top：30px.，出现了塌陷问题。

​ 如何解决外边距塌陷问题：

​ ①给父元素定义上边框

​ ②给父元素定义上内边距

​ ③给父元素添加 overflow：hidden；

​ ④添加浮动

​ ⑤添加绝对定位

3.清除默认的内外边距

(1) body 标签: 自带 margin: 8px; 的属性
(2) p 标签: 默认带有 margin: font-size 的值
(3) h 标签: 也默认带有 margin-top 和 margin-bottom
(4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
...

方法（清除页面中标签的默认padding和margin）：

* { 
	padding: 0;
	margin: 0; 
}

也可以清除想要清除的标签，*是全局标签清除默认内外边距