如何去掉element-ui的el-card自带的padding

最新推荐文章于 2024-09-27 11:58:07 发布
最新推荐文章于 2024-09-27 11:58:07 发布
阅读量2.2k 收藏 1
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ll123456789_/article/details/129988241
版权

最近在项目中有大量用到element-ui的卡片布局,但是它本身自带的padding就非常影响后面进行样式调整,所以我是直接写行内样式去掉padding,设置body-style就可以了.

 <el-card  :body-style="{ padding: '0px' }"></el-car>

现在征集大佬们知道的更多的其他的解决方案,欢迎大佬们留言,不知道为啥,我用深度选择器设置padding值为0 不生效.

麦兜的明天
关注
Vue3 - Element Plus 隐藏去除 Popover 气泡卡片内边距，el-popover 气泡弹框组件去掉 padding 内边距（提供详细教程及示例代码，保证您成功去除）
王佳斌
09-19 4197
vue3，element plus组件库，popover气泡卡片，Popover弹出框，el-popover组件，vue3 element plus 气泡弹框组件el-popover如何去除内边距，element plus怎么隐藏Popover 气泡卡片里面的padding内边距，vue3 element plus实现隐藏el-popover内边距padding，padding内边距如何隐藏删除，vue3 element plus前端框架中的popover弹出框的内边距padding去除隐藏详细教程，pop
Vue项目之Element-UI(Breadcrumb)动态面包屑效果 el-breadcrumb
南七小僧的学海无涯
09-22 590
增加Meta信息，把路径结构配置在 Route meta 属性中。最笨的方法就是在每个需要面包屑的页面中固定写好。然后我们直接在页面中使用计算属性获取数据。
element-ui的＜el-card＞卡片标签去除内边距padding
热门推荐
AI_xin99的博客
11-12 1万+
一、正常情况下没有嵌套，只有一层el-card时直接设置css样式为padding即可； 二、多层嵌套的情况下，我设置上述样式不生效，使用/deep/强制更新即可，所以尝试以下方法： <el-card style="height: 100%;margin-left: 10px" slot="reference"> <el-row :gutter="10" style="margin-bottom: 20px"> <el-col :span="6" class="mo
关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事
最新发布
Angel_Tears_的博客
09-27 439
所以`el-card__body`的宽高, 由内容决定, 当内容超过了`el-card`设置的高度后就会出现内容被隐藏的问题, 所以给`el-card__body`一个不超过`el-card`的宽高问题就可以解决
elementUI去掉el-card内部padding
qiuyushuofeng的专栏
04-09 4280
1.想去掉边框 2.找到element-ui.scss 3.修改el-card__header元素 .el-card__header{ padding: 0px 0px; border: none; }
修改el-card header padding值
Cheryl的加工厂
04-09 6147
想使header布满整个容器，发现有默认的padding值，需要修改为0， 修改style，发现未生效， <style scoped> .el-card .el-card__header { padding: 0 !important; } </style> 添加scoped情况下可以添加/deep/ <style scoped> .el-card /deep/ .el-card__header { padding: 0; } </style>.
如何修改ELEMENT组件中的padding间距-样式名不能重复问题
weixin_54048131的博客
10-02 343
1、使用ELEMENT有时会出现间距过大过小的问题 2、解决方法：点开F12，观察他们每个块元素占据的内容，在浏览器中进行微调试试，这里调整了一下，发现管用 3、将这部分内容复制过去 4、在style样式文件中写相同的代码
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
Element-UI是一个基于Vue.js的组件库，它提供了一套方便的上传组件，用于实现文件上传功能。本文将重点介绍如何在Vue2.0项目中使用Element-UI的upload组件实现图片上传并预览的功能。 首先，我们需要确保已经安装并...
如何修改element-ui样式 支持按需引入
weixin_58562753的博客
05-17 2359
如何修改element-ui样式 支持按需引入
VUE+element-ui微信充值支付
xiaoxudaren的博客
01-06 3790
VUE+element-ui微信充值支付前端页面是参考别人的 前端页面是参考别人的 链接：http://www.lanlanwork.com/blog/?post=5839 <template> <el-card class="box-card"> <ul class="msg-box"> <li> <h4>我要充值</h4> </li> <li>
element-ui 隐藏彩蛋之滚动条使用
IceStreamLab
01-17 1252
<a-card title="项目团队" class="team-list" style="margin-bottom: 24px;" :bordered="false" :body-style="{ padding: 0 }"> <a slot="extra" href="https://mp.weixin.qq.com/s/Kk3c5aaGcJn...
element布局有padding，直接去掉就可以
weixin_41478268的博客
10-09 2006
笔记
关于elementUI el-card 卡片标签消除内边距问题
qq_45763682的博客
04-24 1151
直接上答案 末尾+!但是会影响全部数据，且不起效果。控制台查看 存在内边距。
element-plus的默认样式怎么去除
cf_xyn151886的博客
10-02 620
前几天看见element-ui，vue2上面去除默认样式用>>>，比如.current-font >>> .el-breadcrumb__inner。后来，在vue3上我也用.current-font >>> .el-breadcrumb__inner发现。其实就是将.current-font >>> .el-breadcrumb__inner换成:deep(.title)就可以了，.title是你当前的样式。
修改el-card中header或body样式或自定义图片样式
qq_50276105的博客
10-14 9507
【代码】修改el-card中header或body样式。
element UI表格行高、padding等设置报错问题
ASDF1101122的博客
07-30 2826
element UI里面表格的行高需要自己调整高度和设置padding，直接写style是不行的，里面有 ： 1、row-style （行的 style） 2、header-row-styl （表头行的 style） 3、cell-style（单元格的 style） 如果设置行高或padding直接在表格中写:row-style="height:'32px'"形式也...
el-collapse去除边框；el-table更改背景色
MagicPear的博客
10-26 3525
去除el-collapse折叠面板的默认边框 .el-collapse,.el-collapse-item__wrap { border: none; } 更改el-table表头行跟内容行的背景色 .table td,th{ background-color:#000; } .table thead tr th.is-leaf{ background-color:#000; }
正确运用.el-card__body 类， 记录 el-card 坑点
小蒟蒻的博客
03-01 2373
el-card 内 echart不显示，.el-card__body类 设置，el-card 内边距
vue+element-ui幻灯片
10-17
您可以使用 Element-UI 的 Carousel 组件来实现幻灯片效果。首先，您需要在项目中引入 Element-UI，并在需要使用的页面中注册 Carousel 组件。然后，您可以在 Carousel 组件中使用 Element-UI 的 Card 组件来展示每个幻灯片的内容。以下是一个简单的示例代码： ```html <template> <el-carousel :interval="4000"> <el-carousel-item v-for="(item, index) in slideList" :key="index"> <el-card :body-style="{ padding: '0px' }"> <img :src="item.imgUrl" style="width: 100%"> </el-card> </el-carousel-item> </el-carousel> </template> <script> export default { data() { return { slideList: [ { imgUrl: 'https://picsum.photos/800/300?random=1' }, { imgUrl: 'https://picsum.photos/800/300?random=2' }, { imgUrl: 'https://picsum.photos/800/300?random=3' }, { imgUrl: 'https://picsum.photos/800/300?random=4' } ] }; } }; </script> ``` 在上面的代码中，我们使用了一个数组 slideList 来存储每个幻灯片的图片地址。然后，在 Carousel 组件中使用 v-for 循环遍历 slideList 数组，生成每个幻灯片的内容。在每个幻灯片中，我们使用了 Element-UI 的 Card 组件来展示图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值