假设父div里面有一个子div,给子div添加margin: 100px
<meta charset="UTF-8">
<title>margin</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: blue;
.son {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
</html>
得到的结果:
margin重叠问题是指:
同级元素之间
- 两个水平方向的盒子相遇,那么最终两者之间的距离为左边盒子的右外边距和右边盒子的左外边距之和。
- 两个竖直方向的盒子相遇时,其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
- 假设有一个元素同时设置了margin-top和margin-bottom,但是内容为空,那么这两个margin值也会叠加,值为两者最大的一个,它类似于竖直方向上两个盒子margin值的叠加
父子元素之间(父级和第一个或者最后一个子元素)
- 子元素设置水平竖直方向的margin值 其值实际上是子元素的边框距离父元素padding内侧的距离。
- 子元素设置竖直方向的margin值,当父元素没有设置padding值以及border值时,父元素的上方与子元素的上方完全重合在了一起,无法分开。导致父元素和子元素同时向下的情况。
所以这里遇到的就是父子元素之间的第二种情况,解决方法主要有:
- 给父元素添加padding-top值
- 给父元素添加border值
- 给父元素添加属性overflow:hidden;
- 给父元素或者子元素声明浮动float
- 使父元素或子元素声明为绝对定位:position:absolute;
- 给父元素添加属性 overflow:auto;