背景:
现如今在进行前端开发时,为了能够快速的构建项目,我们往往会使用到现存市面上封装好的一些ui组件库,比如vue的element组件库,react的ant-design,但在使用这些组件库时,往往会出现比较让我们头疼的情况,那就是有的组件封装有中间层,不对外暴露,这让我们很难设置这个中间元素的样式。今天在项目开发时我就遇到了这个问题,使用的一个组件对外暴露的两层中还插入了一个div,而这个div设置了padding的值,正常来说,我是无论如何都改变不了这个父元素的padding的值,但这就与我的设计图不符,同样的,最后打开百度找到了解决方法。

解决:
对于父元素所设置的padding,子元素想要进行忽略,可以设置负的margin值进行覆盖。
感觉阐述起来不好理解,下面上代码解释:

<div style="padding:15px">
    <div style="margin:-15px"></div>
</div>

就是这么简单!!!

活到老,学到老!!!

Logo

前往低代码交流专区

更多推荐