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

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

分享给朋友：

elementui响应式布局

响应式布局基础概念响应式布局指页面能够根据屏幕尺寸自动调整结构和样式，确保在不同设备上呈现良好的用户体验。Element UI 基于 Vue.js，其组件默认支持响应式设计，但需结合 CSS 媒体查…

elementui中文网

Element UI 中文网相关信息 Element UI 是一款基于 Vue.js 的开源 UI 组件库，由饿了么前端团队开发和维护。以下是关于 Element UI 中文网的相关信息：官方网站…

elementui升级plus

Element UI 升级到 Element Plus 的方法 Element Plus 是 Element UI 的升级版本，专为 Vue 3 设计，提供了更好的性能和更多新特性。以下是升级的具体步…

elementui组件

ElementUI 组件概述 ElementUI 是一套基于 Vue.js 的桌面端组件库，提供丰富的 UI 组件，适用于快速开发中后台系统。以下是其核心组件分类及典型用法。基础组件 Button…

elementui vue2

使用 Element UI 与 Vue 2 的指南 Element UI 是一个基于 Vue 2 的组件库，专为开发者、设计师和产品经理设计，提供丰富的组件和交互方式。安装 Element UI…

elementui router

Element UI 结合 Vue Router 的使用方法 Element UI 是一个基于 Vue.js 的组件库，而 Vue Router 是 Vue.js 的官方路由管理器。将两者结合使用可以…

elementui间距