ElementUI的el-card中，内部元素margin属性失效问题

问题：

在使用 el-card 时内部的分页组件超出了 el-card 的范围，而且 margin 属性失效，无法控制，很不好看：

解决方法：

给分页组件外层加一个 div，定位属性 position: relative;。就可以了。

案例：

我这里分页组件用的时 ruoyi-Vue3 中封装好的组件，其实内部用的还是 el-pagination。

错误代码：

<el-card class="box-card" style="margin: 10px;min-height: 750px;">
	······
	<el-table></el-table>
	······


<pagination :total="total" :layout="total, sizes, prev, pager, next" v-model:page="pageNum" v-model:limit="pageSize" />

</el-card>

<style scope>
.pagination{
          
   
	margin-right: 3%;	// 这里的 margin-right 失效了！！！
}
<style>

更新后：

<el-card class="box-card" style="margin: 10px;min-height: 750px;">
	······
	<el-table></el-table>
	······

<div class="pagination">
	<pagination :total="total" :layout="total, sizes, prev, pager, next" v-model:page="pageNum" v-model:limit="pageSize" />
</div>

</el-card>
<style scope>
.pagination{
          
   
	position: relative;	
	margin-right: 3%;
}
<style>

修改后的效果： margin-right 生效了。

总结：

之前在做前端样式优化的时候，遇到过许多类似的问题，归根结底是组件分装的问题，以及定位的参考造成的。