CSS 外边距教程_CSS 外边距免费在线学习_CSS 教程_CSS

CSS 外边距（margin）用于控制元素与周围元素之间的空间。它可以应用于元素的四个边（上、右、下、左），并接受多种单位（如像素、百分比、em 等）。外边距可以是正值、负值或 auto。

外边距的作用

外边距（margin）用于控制元素与周围元素之间的空间。它可以应用于元素的四个边（上、右、下、左），并接受多种单位（如像素、百分比、em 等）。外边距可以是正值、负值或 auto。

基本语法

margin: value;

value 可以是一个值、两个值、三个值或四个值，分别对应不同的边距设置。

单值语法

.zz123_box {
  margin: 10px;
}

所有四个边的外边距都为 10px。

双值语法

.zz123_box {
  margin: 10px 20px;
}

上下外边距为 10px，左右外边距为 20px。

三值语法

.zz123_box {
  margin: 10px 20px 30px;
}

上外边距为 10px，左右外边距为 20px，下外边距为 30px。

四值语法

.zz123_box {
  margin: 10px 20px 30px 40px;
}

上外边距为 10px，右外边距为 20px，下外边距为 30px，左外边距为 40px。

单独设置某一边的外边距

.zz123_box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

分别设置上、右、下、左的外边距。

使用 `auto`

.zz123_box {
  margin: auto;
}

常用于水平居中元素。当左右外边距设置为 auto 时，浏览器会自动计算左右外边距，使元素水平居中。

负值外边距

.zz123_box {
  margin: -10px;
}

负值外边距会使元素向相反方向移动，常用于调整布局。

外边距折叠

当两个垂直相邻的元素都有外边距时，它们的外边距会折叠（合并）为一个外边距，其大小为两者中的较大者。例如：

.zz123_element1 {
  margin-bottom: 20px;
}

.zz123_element2 {
  margin-top: 30px;
}

实际的外边距为 30px，而不是 50px。

多种单位举例

外边距支持多种单位，以下是一些常见单位的示例：

1. 像素 (`px`)

   .zz123_box {
     margin: 20px;
   }

2. 百分比 (`%`)

   .zz123_box {
     margin: 10%;
   }

3. 相对单位 (`em` 和 `rem`)

   .zz123_box {
     margin: 2em; /* 2倍当前字体大小 */
   }

   .zz123_box {
     margin: 1.5rem; /* 1.5倍根元素字体大小 */
   }

4. 视口单位 (`vw` 和 `vh`)

   .zz123_box {
     margin: 5vw; /* 外边距为视口宽度的 5% */
   }

   .zz123_box {
     margin: 10vh; /* 外边距为视口高度的 10% */
   }

5. `calc()` 函数

   .zz123_box {
     margin: calc(10% + 20px); /* 外边距为父元素宽度的 10% 加上 20px */
   }

6. `inherit`

   .zz123_box {
     margin: inherit;
   }

综合示例

<div class="zz123_container">
  <div class="zz123_box">Box</div>
</div>

.zz123_container {
  width: 80%;
  margin: 0 auto; /* 水平居中 */
  border: 1px solid #000;
}

.zz123_box {
  margin: 10px 5%; /* 上下外边距为 10px，左右外边距为父元素宽度的 5% */
  padding: 1em; /* 内边距为当前字体大小的 1 倍 */
  background-color: lightblue;
}

总结

属性	描述	示例
`margin`	设置所有边的外边距	`margin: 20px;`
`margin-top`	设置上外边距	`margin-top: 10px;`
`margin-right`	设置右外边距	`margin-right: 20px;`
`margin-bottom`	设置下外边距	`margin-bottom: 30px;`
`margin-left`	设置左外边距	`margin-left: 40px;`
单位	支持多种单位（`px`、`%`、`em` 等）	`margin: 1.5rem;`
`auto`	自动计算外边距	`margin: 0 auto;`
负值	使元素向相反方向移动	`margin: -10px;`

通过合理使用外边距，可以有效地控制页面布局和元素之间的间距。如果还有其他问题，请随时告诉我！ 😊

CSS

CSS 教程

CSS 外边距