Element Plus 中 mt-x 类的使用与卡片间距调整

前言

在配置两个卡片模块后，发现它们之间的间距过大且无法直接调整。

经排查，该间距问题由卡片内部的 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>

到此这篇关于Element Plus UI 中 mt-x 类的基本知识的文章就介绍到这了,更多相关Element Plus UI 中 mt-x 类内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！