elementui padding
调整 ElementUI 组件内边距（padding）
ElementUI 组件的内边距可通过 CSS 覆盖默认样式或使用组件提供的属性进行调整。以下是常见方法：
修改全局样式 通过覆盖 ElementUI 的 CSS 变量或类名实现全局调整：
/* 修改默认主题变量 */
:root {
--el-padding-base: 12px; /* 基础内边距 */
}
/* 针对特定组件覆盖样式 */
.el-button {
padding: 8px 15px !important;
}组件级样式覆盖 为特定组件添加自定义类名并覆盖样式：
<el-button class="custom-padding">按钮</el-button>.custom-padding {
padding: 10px 20px;
}使用组件属性 部分组件支持直接通过属性调整间距：
<el-menu :padding="10">...</el-menu>
<el-card :body-style="{ padding: '16px' }">...</el-card>常见组件 padding 调整示例
表格单元格间距
.el-table td {
padding: 8px 0;
}表单项间距
.el-form-item {
margin-bottom: 18px;
}
.el-form-item__content {
padding-left: 10px;
}弹窗内容间距
.el-dialog__body {
padding: 20px;
}注意事项
- 使用
!important需谨慎，建议通过提高 CSS 选择器优先级实现覆盖 - 修改全局变量需在引入 ElementUI 样式后进行
- 响应式设计建议结合媒体查询调整不同屏幕尺寸下的 padding 值
