el-card卡片间空出一定间隔如何设置
时间: 2023-08-18 21:10:18 浏览: 869
Element Card 卡片的具体使用
要在 el-card 组件中设置卡片之间的间隔,你可以使用 CSS 来添加一些定义样式。以下是一种常见的方法:
1. 首先,给每个 el-card 组件添加一个自定义的类名,例如 "card-item"。
```html
<el-card class="card-item">Card 1</el-card>
<el-card class="card-item">Card 2</el-card>
<el-card class="card-item">Card 3</el-card>
```
2. 在你的 CSS 文件中或者使用 `<style>` 标签,添加以下代码:
```css
.card-item + .card-item {
margin-top: 10px; /* 设置上方间隔的大小 */
}
```
这样,每个具有 "card-item" 类名的 el-card 组件之间就会有一个 10 像素的间隔。你可以根据需要调整 `margin-top` 的值来改变间隔的大小。
请确保在引入 CSS 样式时,它们在 el-card 组件样式之后加载,以确保自定义样式能够生效。
阅读全文