分析Element Plus UI 中 mt-x 类的基本知识

前言

设置两个card的模块之后，发现间隔一直很大，无法进行调整

后续发现是card中的mt-x所影响，索性了解一些基本的内容！

1. 基本知识

mt-x 是一个用于设置元素上外边距的类名，通常是在 Element Plus UI 组件库中使用的

mt 代表 “margin-top”，后面的 x 是数值，表示外边距的大小

Element Plus 提供了一系列类似的类来控制外边距和内边距，方便在组件中快速调整布局

• 常用格式：mt-0, mt-5, mt-10, mt-20, mt-30 等，数字通常是间距的单位（通常为像素）

常用在哪些组件/架构

• 卡片组件 (<el-card>)：用于在不同卡片之间创建间隔
• 行和列组件 (<el-row> 和 <el-col>)：用于在栅格布局中调整行和列之间的间距
• 按钮 (<el-button>)：在多个按钮之间创建间距
• 表单 (<el-form>)：在表单字段之间调整间距

使用 mt-x 类可以快速调整元素的顶部外边距
这样可以使布局更整洁，避免手动在 CSS 中设置外边距
Element Plus 提供的这些类可以极大地简化样式管理，并确保设计的一致性

2. Demo

以下为一个简易的Demo，主要了解基本的用法

<template>
  <div>
    <el-card class="mt-20" shadow="hover">
      <div>卡片 1</div>
    </el-card>

    <el-card class="mt-20" shadow="hover">
      <div>卡片 2</div>
    </el-card>

    <el-card class="mt-20" shadow="hover">
      <div>卡片 3</div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style>
/* 添加全局样式或特定样式 */
</style>