margin 的那些奇特现象

我们初学 CSS 布局 HTML 页面结构时，肯定经常会用到“margin”外边距这个属性。此属性对页面布局十分有用，也十分方便。但有时也会出现一些奇特的现象。

我们先简单了解一下 margin， margin 有四个属性，分别为：margin-top、margin-right、margin-bottom 和 margin-left。每个属性分别对应元素内容的顶部、右侧、底部和左侧的外边距。

正常情况下，margin 的表现和我们想的一样，不会出现什么问题。但是，在某些情况下，它会表现出一些奇怪的现象。

1. 负外边距

margin 可以为负值，这会导致元素的内容超出其边框。这在某些情况下很有用，例如当你想让元素的内容重叠时。

.element {
  margin-top: -20px;
}

这将使 .element 内容向上移动 20 像素，超出其边框。

2. 自动外边距

在某些情况下，margin 会自动计算。例如，当元素是块级元素时，并且它的内容没有明确的外边距时，浏览器会自动为其添加一些外边距。这被称为“自动外边距”。

自动外边距的大小取决于元素的类型和浏览器。例如，在 Chrome 中，<h1> 元素的自动外边距为顶部和底部 16 像素，左右各 8 像素。

<h1>Hello, world!</h1>

这将导致 <h1> 内容上下各留出 16 像素，左右各留出 8 像素的外边距。

3. 外边距塌陷

当两个或更多个元素的垂直外边距重叠时，就会发生外边距塌陷。这会导致元素的外边距合并，而不是相加。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  margin: 20px;
}

.item {
  margin: 10px;
}

这将导致 .container 的外边距为 20 像素，.item 的外边距为 10 像素。但是，由于外边距塌陷，.item 的实际外边距只有 10 像素，而不是 20 像素。

4. 百分比外边距

margin 可以使用百分比值。这会使元素的外边距相对于其父元素的宽度或高度。

.element {
  margin: 10%;
}

这将使 .element 的外边距为其父元素宽度的 10%。

总结

margin 是一个强大的属性，可以用来控制元素周围的空间。但是，在使用它时要注意一些奇特的现象。通过了解这些现象，你可以避免它们导致的意外结果，并创建更一致和可预测的布局。