el‐card 減少佔用高度 - daniel-qa/Vue GitHub Wiki

el-card 減少佔用高度

<el-card :body-style="{ padding: '8px 12px' }" shadow="never" style="margin: 0;">
  • 1 . 使用 body-style 精簡內部 padding

Element Plus 的 支援 body-style 屬性，可用來調整內部內容的 padding：

<el-card :body-style="{ padding: '8px 12px' }">
  • 2 . 移除不必要的 shadow（陰影也會視覺上增加「厚度」）
<el-card shadow="never">

可用值有：

always（預設）

hover

never

  • 3 . 控制外部間距：避免不必要的 margin
<el-card style="margin-bottom: 8px;" />

或者如果你是全區唯一一張卡片，可直接設定：

<el-card style="margin: 0;" />
  • 快速範本（超緊湊卡片）
<el-card :body-style="{ padding: '8px 12px' }" shadow="never" style="margin: 0;">
  <el-form>
    <!-- 表單內容 -->
  </el-form>
</el-card>
⚠️ **GitHub.com Fallback** ⚠️