分析Element Plus UI 中 mt-x 类的基本知识
目录
- 前言
- 1. 基本知识
- 2. Demo
前言
设置两个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>