css边距重叠的解决方案

**

css防止边距重叠的方法

**

今天整理了一下用css防止边距重叠的几种方法
先假设一组dom结构

<div class="parent">
    <div class="child">
    </div>
</div>

通常情况下,如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果,然而
这其实不是我们想要的结果,我们只想对子元素设置margin,那么现在我们应该怎么做呢?
(1) 给父元素设置边框

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(2)给父元素添加padding

.parent {
    padding: 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(3)在子元素上方加一个有宽高的兄弟元素,记住是有宽高的。

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

(4)给父元素设置 overflow: hidden; 属性

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(5)给子元素设置 display: inline-block;(如果子元素是行内元素或者行内块级元素则不会产生边距重叠的问题)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

(6)使子元素脱离文档流这个实现的方法有很多,浮动,绝对定位等,这里我就不做具体的解释了。
希望可以能帮助到需要的人,如果你觉得这个文章帮到你了,就麻烦动动小手点个赞吧!嘿嘿


语过添情
不积跬步无以至千里,不积小流无以成江海

有梦想但又不失风趣的程序员

361 声望
22 粉丝
0 条评论
推荐阅读
谈谈我熟悉又陌生的cookie
大概是我的业务领域比较狭窄的原因,我总是会听说cookie,却很少在实际的开发中应用或者实践过它,今天刚好看到&lt;&lt;JavaScript高级程序设计第三版&gt;&gt;的数据存储部分,说到了cookie,这里就对cookie做一个深入...

慢思考快行动10阅读 2.5k

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

超长溢出头部省略打点,坑这么大,技巧这么多?
在业务中,有这么一种场景,表格下的某一列 ID 值,文本超长了,正常而言会是这样:通常,这种情况都需要超长省略溢出打点,那么,就会变成这样:但是,这种展示有个缺点,3 个 ID 看上去就完全一致了,因此,PM ...

chokcoco14阅读 1.3k评论 3

那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图

有梦想但又不失风趣的程序员

361 声望
22 粉丝
宣传栏