CSS盒子模型

容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。 它的尺寸为内容宽度（content-box 宽度）和内容高度（content-box 高度）。 它通常含有一个背景颜色（默认颜色为透明）或背景图像。

扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框之间的间距。 它的尺寸是 padding-box 宽度 和 padding-box 高度。

扩展自内边距区域，是容纳边框的区域。 其尺寸为 border-box 宽度和 border-box 高度。

用空白区域扩展边框区域，以分开相邻的元素。 它的尺寸为 margin-box 宽度和 margin-box 高度。 外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。 在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

当两个块级元素并排时，它们的负外边距会让它们互相重叠。这可以用于调整元素之间的距离或者实现特定的布局效果。 当一个元素的左边距为负时，它会向左移动；当一个元素的右边距为负时，它会向右移动。这可以用于调整元素相对于其父容器的位置。

当两个垂直排列的块级元素具有负外边距时，它们会互相重叠。这可以用于调整元素之间的距离，特别是当需要减少默认的垂直间距时。 当一个元素的上边距为负时，它会向上移动；当一个元素的下边距为负时，它会拉近下一个元素与它之间的距离。