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

elementui间距

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

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

elementui间距

标签: 间距 elementui

分享给朋友：

iview elementui

iview与Element UI对比 iview和Element UI都是基于Vue.js的UI组件库，适用于快速开发企业级中后台产品。以下是两者的主要差异和特点：设计风格 iview采用圆…

elementui视频

以下是关于 ElementUI 视频资源的整理，涵盖教程、实战案例和官方资源： ElementUI 官方视频资源 ElementUI 官方文档虽以文字为主，但部分社区或第三方平台可能有官方团队发布的…

elementui特色

组件化设计 Element UI 提供丰富的组件库，包括表单、表格、导航、通知等常用 UI 元素。所有组件均采用模块化设计，支持按需引入，减少项目体积。响应式布局组件默认适配不同屏幕尺寸，内置…

yarn elementui

安装 Element UI 与 Yarn Element UI 是一个基于 Vue.js 的组件库，使用 Yarn 作为包管理工具可以快速安装和集成。以下是具体方法：确保已安装 Yarn 和 V…

elementui面板

ElementUI 面板组件 ElementUI 提供了 el-collapse 和 el-collapse-item 组件来实现面板（折叠面板）功能。以下是如何使用这些组件的详细说明：安装 El…

elementui整合

ElementUI 整合指南 ElementUI 是一款基于 Vue.js 的桌面端组件库，广泛应用于中后台系统的快速开发。以下是整合 ElementUI 到项目中的具体方法：安装 Element…

elementui间距