css盒子模型 css margin 外边框合并

一、CSS盒子模型

CSS盒子模型可以简单地描述为：HTML元素可以看成是一个矩形的盒子，并包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。这四个部分的大小是可以通过CSS对其进行设置的。

默认情况下，CSS盒子模型的宽度和高度只包含内容(content)的大小。而padding、border和margin的大小并不在宽度和高度之内。同时，CSS盒子模型也支持使用box-sizing属性来改变盒子模型的计算方式。

下面的代码展示了一个简单的CSS盒子模型示例：

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #000;
  margin: 20px;
}

二、CSS Margin 外边框合并

CSS Margin 外边框合并是指多个盒子的margin边距重叠后，取其中最大的边距值作为它们之间的距离。这种现象主要发生在兄弟元素之间或者父元素和第一个/最后一个子元素之间。

这里有两个示例，用于展示CSS Margin 外边框合并的现象：

1. 兄弟元素间的外边框合并

<div class="box"></div>
<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #ccc;
}
</style>

在上面的代码中，两个box元素的margin值为20px，因此它们之间的距离应该是40px。但是，由于它们的margin是相邻的，因此它们的margin会合并为一个20px的值。最终，它们之间的距离也就只有20px了。

1. 父元素和第一个子元素之间的外边框合并

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

<style>
.parent {
  width: 200px;
  height: 200px;
  margin: 20px 0;
  background-color: #ccc;
}

.child {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  background-color: #aaa;
}
</style>

在上面的代码中，父元素的上边距和下边距都为20px，而子元素的上边距为30px。由于父元素和子元素之间的边距是相邻的，因此它们的margin也会合并为一个30px的值。

最终，子元素与父元素之间的距离就变成了30px，而不是我们想象中的50px。