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

elementui间距

2026-03-06 00:18:39前端教程

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;
}

响应式间距实现

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

elementui间距

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

注意事项

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

标签: 间距 elementui

分享给朋友：

elementui视频

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

面试elementui

面试准备：ElementUI 核心知识点基础组件与用法熟悉常用组件如 el-button、el-form、el-table、el-dialog 的使用场景和配置项。例如表单验证需结合 rules…

elementui import

安装 Element UI 在项目中安装 Element UI 可以通过 npm 或 yarn 完成： npm install element-ui --save # 或 yarn add el…

elementui实例

以下是关于 Element UI 实例的整理内容，涵盖常见组件用法和实际开发中的关键点：安装与基础配置通过 npm 安装 Element UI： npm install element-ui…

elementui keyup

监听键盘事件的方法在Element UI中监听键盘事件（如keyup）可以通过原生Vue事件绑定或Element UI组件提供的native修饰符实现。以下是具体方法： 1. 在普通HTML元素上…

elementui单据

以下是关于Element UI中实现单据（如订单、表单等）功能的整理方案，结合组件库特性和常见业务场景：表单数据绑定使用 el-form 组件绑定单据数据模型，支持动态表单字段和校验规则。示例代…

elementui间距