一、简介

margin 是 CSS 中用于控制元素外边距的属性。外边距是元素边框与周围元素之间的空间。通过调整 margin，可以控制元素之间的间距以及元素在页面中的布局。

1. 语法

margin: value;

2. 取值

value 可以是以下值：

• 长度值（如 10px、2em）。
• 百分比（如 5%）。
• auto：浏览器自动计算外边距（常用于水平居中）。
• inherit：继承父元素的外边距。

二、示例

标题

margin 对 Flex 布局的影响

<template>
  <el-row>
    <h2>在第1/2个元素上加 margin: auto</h2>
    <el-col :span="24">
      <div class="container">
        <div class="item" style="margin: auto">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item" style="margin: auto">元素 3</div>
        <div class="item">元素 4</div>
        <div class="item">元素 5</div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <h2>在第1/2/3个元素上加 margin: auto</h2>
    <el-col :span="24">
      <div class="container">
        <div class="item" style="margin: auto">元素 1</div>
        <div class="item" style="margin: auto">元素 2</div>
        <div class="item" style="margin: auto">元素 3</div>
        <div class="item">元素 4</div>
        <div class="item">元素 5</div>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <h2>在第1/3个元素上加 margin-left: auto</h2>
    <el-col :span="24">
      <div class="container">
        <div class="item" style="margin-left: auto">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item" style="margin-left: auto">元素 3</div>
        <div class="item">元素 4</div>
        <div class="item">元素 5</div>
      </div>
    </el-col>
  </el-row>
</template>
<style scoped>
.item {
  border: 1px dashed;
  background: #c5c5c5;
  height: 50px;
  padding: 10px 20px;
}
.container {
  display: flex;
  background: #f0f0f0;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24