嵌套el-card设置padding为0
时间: 2024-03-13 11:20:14 浏览: 172
el-table嵌套 el-form并且加正则校验
你可以在 `el-card` 上设置 `padding` 为 0,然后在 `el-card__body` 上设置需要的 `padding`,像这样:
```html
<el-card :body-style="{ padding: '20px' }" style="padding: 0;">
<div class="card-content">Card content</div>
</el-card>
```
在这个例子中,我们在 `el-card` 上设置了 `padding: 0`,然后在 `el-card__body` 上设置了 `padding: 20px`。这将使卡片主体具有 20px 的内边距,同时删除卡片的外边距。
注意,`el-card` 的内边距和外边距是通过 CSS 变量控制的,因此你可以通过覆盖这些变量来改变卡片的边距。例如,要将卡片的内边距设置为 0,可以使用以下 CSS:
```css
.el-card__body {
padding: 0 !important;
}
.el-card__header,
.el-card__footer {
padding: var(--card-padding) !important;
}
```
这将覆盖 `el-card` 的默认内边距,并将 `el-card__header` 和 `el-card__footer` 的内边距设置为卡片的默认内边距。请注意,这需要使用 `!important` 来确保样式的优先级。
阅读全文