el-card设置padding为0

可以通过在 `el-card` 组件中设置 `padding` 样式为 0 来实现：

<el-card :style="{padding: '0px'}">
  <!-- 卡片内容 -->
</el-card>

或者，你也可以在 CSS 中为 `el-card` 组件设置样式：

.el-card {
  padding: 0;
}

相关问题

嵌套el-card设置padding为0

你可以在 `el-card` 上设置 `padding` 为 0，然后在 `el-card__body` 上设置需要的 `padding`，像这样：

<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：

.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` 来确保样式的优先级。

<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上

你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性，同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性，代码如下：

<el-row justify="center">
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
</el-row>

这样设置后，每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内，同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。