el-row 与 el-row之间无间距
时间: 2023-11-12 07:58:41 浏览: 134
el-row 与 el-row之间无间距可能是因为它们之间的 margin 或 padding 被设置为 0。可以通过在样式表中设置 margin 或 padding 来解决这个问题。
相关问题:
1. 如何在样式表中设置 margin 或 padding?
2. el-row 是什么?它有哪些属性和方法?
3.
相关问题
el-row设置间距
可以通过设置 `gutter` 属性来设置 `el-row` 之间的间距。`gutter` 属性的值可以是任何数字,表示间距的像素大小。以下是一个例子:
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-divider></el-divider>
<el-row :gutter="40">
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
</template>
<style>
.grid-content {
height: 60px;
}
.bg-purple {
background: #99a9bf;
}
.bg-purple-light {
background: #d3dce6;
}
</style>
```
在上面的例子中,我们设置了两个 `el-row`,分别设置了不同的 `gutter` 值。第一个 `el-row` 的 `gutter` 值为 20,第二个 `el-row` 的 `gutter` 值为 40。这样就可以设置不同的间距大小了。
vue的el-row :gutter设置行间距
在Vue的Element UI中,可以使用el-row的gutter属性来设置行内列之间的间距(行间距)。这个属性通常用于控制列之间的水平间距,以增加页面的可读性和美观度。
以下是一个示例代码,演示了如何使用el-row的gutter属性来设置行间距为20px:
```html
<template>
<el-row :gutter="20">
<el-col :span="12">Column 1</el-col>
<el-col :span="12">Column 2</el-col>
</el-row>
</template>
```
在上述代码中,el-row的gutter属性被设置为20,表示行内列之间的间距为20px。这样,Column 1和Column 2之间就会有一个20px的间距。
注意:gutter属性的值可以是任意有效的CSS长度单位,例如px、rem等。