当前位置：首页 > 前端教程

elementui间距

2026-01-16 16:33:38前端教程

Element UI 间距设置方法

Element UI 提供了多种方式设置组件间距，包括内置工具类、CSS 变量和自定义样式。

使用内置间距工具类

Element UI 提供了一套基于 margin 和 padding 的工具类，格式为 [m|p][方向]-[尺寸]：

elementui间距

/* 四个方向 */
.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;

组件特定间距

部分组件支持单独设置间距属性：

elementui间距

<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

标签: 间距 elementui

分享给朋友：

elementui使用

安装 Element UI 通过 npm 或 yarn 安装 Element UI： npm install element-ui --save # 或 yarn add element-ui 在项…

elementui echarts

ElementUI 与 ECharts 集成指南 ElementUI 是饿了么团队开发的 Vue.js 组件库，ECharts 是百度开源的 JavaScript 图表库。两者结合可快速构建数据可视化…

elementui open=

ElementUI Open 方法详解 ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。open 方法通常用于打开对话框、下拉菜单等交互组件。 Dialog 组件的…

elementui滚动

ElementUI 滚动相关功能 ElementUI 提供了多种滚动相关的组件和功能，适用于不同场景的需求。以下是一些常见的滚动实现方法和组件：滚动条组件（ElScrollbar） Element…

手机elementui

根据搜索结果，Element UI 是一个基于 Vue.js 的桌面端组件库，但若需在移动端使用类似风格的组件库，以下是与手机端适配的替代方案及实现建议：移动端替代方案 Vant 专为移动端设计的…

elementui范围

ElementUI 范围选择功能 ElementUI 提供了多种范围选择组件，适用于日期、时间、数值等场景。以下是常见的范围选择组件及其使用方法。日期范围选择使用 el-date-picker…

elementui间距