elementui间距
Element UI 间距设置方法
Element UI 提供了多种方式设置组件间距，包括内置工具类、CSS 变量和自定义样式。
使用内置间距工具类
Element UI 提供了一套基于 margin 和 padding 的工具类，格式为 [m|p][方向]-[尺寸]：
/* 四个方向 */
.m-10 { margin: 10px; }
.p-10 { padding: 10px; }
/* 单方向 */
.mt-10 { margin-top: 10px; }
.pl-10 { padding-left: 10px; }修改 SCSS 变量
通过覆盖 SCSS 变量调整全局间距：
$--spacing-extra-small: 5px !default;
$--spacing-small: 10px !default;
$--spacing-medium: 20px !default;
$--spacing-large: 30px !default;组件特定间距
部分组件支持单独设置间距属性：
<el-row :gutter="20">
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
<el-menu :collapse-transition="false"></el-menu>自定义间距类
创建自定义间距类实现灵活控制：
.custom-gap > * + * {
margin-left: 16px;
}
.flex-gap {
gap: 24px;
}响应式间距实现
结合断点设置不同屏幕尺寸下的间距：
@media (max-width: 768px) {
.responsive-padding {
padding: 10px;
}
}间距最佳实践
- 使用 8px 倍数作为间距基准值保持视觉一致性
- 表单组件建议垂直间距不小于 16px
- 卡片类容器内边距建议 20-24px
- 栅格系统 gutter 值通常设置为 16-24px
