内联元素&块级元素 margin外边距特性问题（塌陷问题）的究其根本解决方案

前言

现代网络世界中，网页设计的本质是将设计师的创意转化为浏览器可识别的形式，在web浏览器中展示给用户。每一个网页本质上是一个包含多个盒子的容器。元素之间的相互作用可能会导致不一致，甚至会导致布局错误。HTML 盒模型正是用于解释元素之间如何交互并最终呈现到屏幕上的一个模型。

HTML盒模型是Web开发中用来元素在页面中所占空间的一种模型。该模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分组成。

内联元素和块级元素是HTML中两种最基本类型的元素，其特性问题是margin外边距塌陷问题。这会导致元素之间的间距不一致，从而导致页面布局混乱。

HTML 盒模型特性问题的根本原因

现在我们来研究一下 margin 塌陷问题背后的原因。父元素和子元素的 margin 都可以是正值或负值。我们可以使用Chrome浏览器来分析margin的塌陷问题。打开浏览器的控制台，在控制台中输入以下内容：

div {
  margin: 20px;
  border: 1px solid black;
}

p {
  margin: 10px;
  border: 1px solid red;
}

你会看到两个盒子，父盒子是黑色的，子盒子是红色的。子盒子的 margin 是10px，父盒子的 margin 是20px。

你会发现子元素的 margin 并没有像我们期望的那样应用到它自己的空间上，而是作用到了父元素上。这是因为 margin 塌陷了。

根治问题的四种方法

1. 添加一个空div

HTML中，可以使用一个空div作为父元素和子元素之间的间隙，以防止margin外边距塌陷问题。示例如下：

<div class="parent">
  <div class="child"></div>
</div>

父元素的CSS样式：

.parent {
  margin: 20px;
  border: 1px solid black;
}

子元素的CSS样式：

.child {
  margin: 10px;
  border: 1px solid red;
}

使用这种方法，子元素的margin将作用于空div，不会影响到父元素。

2. 设置父元素overflow: hidden

设置父元素的overflow属性为hidden可以解决margin外边距塌陷问题。overflow属性规定了如果元素的内容溢出，浏览器应该如何处理溢出的内容。如果将overflow设置为hidden，则元素的内容将被修剪，不会溢出。

示例：

.parent {
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;
}

.child {
  margin: 10px;
  border: 1px solid red;
}

当父元素的overflow属性设置为hidden时，子元素的margin将不会影响到父元素。

3. 设置父元素position: relative

设置父元素的position属性为relative可以解决margin外边距塌陷问题。position属性规定元素的定位类型。如果将position设置为relative，则元素将在正常位置上生成一个块级框，但不会移动其它元素。

.parent {
  margin: 20px;
  border: 1px solid black;
  position: relative;
}

.child {
  margin: 10px;
  border: 1px solid red;
}

当父元素的position属性设置为relative时，子元素的margin将不会影响到父元素。

4. 设置负margin

设置子元素的margin为负值可以解决margin外边距塌陷问题。但使用这种方法时，需要注意不要将子元素的margin设置为一个负值，使得子元素的margin值小于0。

.parent {
  margin: 20px;
  border: 1px solid black;
}

.child {
  margin: -10px;
  border: 1px solid red;
}

当子元素的margin设置为负值时，子元素的margin将不会影响到父元素。

结语

无论是添加一个空div，还是设置父元素overflow: hidden，或者设置父元素position: relative，亦或是设置负margin，都是为了防止margin外边距塌陷问题。这些方法的本质都是通过创建一个新的块级上下文来解决margin外边距塌陷问题。