CSS 外边距

CSS 外边距

学习如何使用 CSS 外边距属性在元素周围创建空间。

理解外边距

CSS margin 属性定义了元素边框外部的空间。外边距用于将元素与其相邻元素或与其包含块的边缘分开。

外边距的关键特性：

• 它们是透明的；它们本身没有背景色。
• 它们存在于元素的边框之外。
• 相邻块级元素的垂直外边距（顶部和底部）有时会“合并”成一个单一的外边距。请参阅 MDN 上的外边距合并（Margin Collapsing）。

外边距属性和值

您可以单独控制每边的外边距，或使用缩写属性。

单独的边：

• margin-top
• margin-right
• margin-bottom
• margin-left

这些属性接受以下值：

值类型	描述
<length>	使用 px、em、rem、cm 等单位指定固定的外边距。默认为 0。
<percentage>	指定以外边距作为包含块宽度的百分比（即使是用于 margin-top 和 margin-bottom）。
auto	浏览器计算外边距。通常用于具有定义宽度的块级元素上，配合 margin-left: auto; margin-right: auto; 使其在其容器中水平居中。
inherit	指定外边距应从父元素继承。

注意：允许使用负外边距值，可用于拉近元素或创建重叠效果。

使用单独属性的示例：

.content-box {
  margin-top: 1.5rem;    /* 上方的空间 */
  margin-bottom: 1.5rem; /* 下方的空间 */
  margin-left: 10%;     /* 左侧的缩进 */
  margin-right: 5%;      /* 右侧的空间 */
  border: 1px solid #ccc; /* 仅用于可见性 */
  padding: 1rem;
}

外边距缩写属性：margin

为了编写更少的代码，margin 缩写属性可以在一个声明中设置所有四个外边距。

它可以接受一个、两个、三个或四个值：

• 一个值： margin: 20px; (应用于所有四边，20px 外边距)
• 两个值： margin: 10px 30px; (第一个值用于上/下，第二个用于左/右)
• 三个值： margin: 10px 20px 30px; (第一个用于顶部，第二个用于左/右，第三个用于底部)
• 四个值： margin: 10px 20px 30px 40px; (按上、右、下、左的顺序应用 - 顺时针方向)

使用缩写的示例：

/* 居中一个具有固定宽度的块元素 */
.centered-element {
  width: 80%;
  max-width: 600px;
  margin: 2rem auto; /* 上/下 2rem，左/右 auto */
  background-color: lightblue;
  padding: 1rem;
}

/* 四个值 */
.custom-spacing {
    margin: 1em 2em 3em 4em; /* 上:1, 右:2, 下:3, 左:4 */
}

实际应用：创建间隔

外边距是用于在布局中（例如网格项或弹性项）元素之间创建空间（间隔，gutters）的基础。

/* 使用 Flexbox 和外边距创建间隔的简单两列布局 */
.container {
    display: flex;
    border: 1px solid #ccc;
}

.column {
    flex: 1; /* 每列占用相等空间 */
    padding: 1em;
    background-color: #f4f4f4;
}

.column + .column {
    /* 仅对跟随在另一列后面的列添加外边距 */
    margin-left: 20px;
}

提示：Flexbox 和 Grid 布局中的 gap 属性通常是一种更现代、更便捷的方式，与直接在外边距上使用相比，它能更轻松地在项之间创建空间。

所有 CSS 外边距属性参考

属性	描述
margin	设置所有四个外边距的缩写属性。
margin-top	设置顶部外边距。
margin-right	设置右侧外边距。
margin-bottom	设置底部外边距。
margin-left	设置左侧外边距。

记住盒模型（Box Model）：外边距是最外层，其次是边框（border），内边距（padding），最后是内容区域（content area）。