elementui间距

Element UI 间距设置方法

Element UI 提供了一套基于 SCSS 变量的间距系统，可通过以下方式调整间距：

使用内置间距类

Element UI 内置了 margin 和 padding 工具类，格式为 {属性}{方向}-{大小}：

/* 示例 */
<el-button class="m-t-10">上边距10px</el-button>
<el-divider class="p-l-20">左侧内边距20px</el-divider>

修改 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="12"></el-col>
</el-row>

<el-menu :collapse-transition="false" menu-trigger="hover"></el-menu>

自定义样式

通过 CSS 直接控制间距：

.custom-spacing {
  margin-bottom: 15px;
  padding: 0 10px;
}

响应式间距实现

结合媒体查询实现响应式间距：

@media (max-width: 768px) {
  .responsive-spacing {
    padding: $--spacing-small;
  }
}

注意事项

1. 修改全局变量需在引入 Element UI 样式前执行
2. 组件间距优先级：组件prop > 自定义class > 全局变量
3. 行内样式会覆盖所有预定义样式