Margin塌陷
先来说下什么是margin塌陷,就是在文档流中,竖直方向的margin会出现合并(叠加),值较大的会覆盖住值较小的,
昨天晚上和群里小伙伴,讨论了一个问题:
就是上图,为什么会这样.小伙伴给出的解决方法是在div里面加上margin,这样是解决了.但在写代码的时候不会直接先写个overflow:hidden吧,造成这样的原因是为什么?
这里就涉及到margin塌陷的问题,
但有的小伙伴会说没有margin哪里来的margin塌陷,别忘了你写了margin:0,这样通了,因为margin合并导致所有子元素的margin与margin:0合并了,注意这种现象只在竖直方向出现
那解决方法有哪些哪?
这里我用个例子来说明:
<body>
<div class="parent">
<div class="child1">
<div class="child2">
</div>
</div>
</div>
</body>
css
* {
margin: 0 auto;
padding: 0 auto;
box-sizing: border-box;
}
div {
margin: 25px;
border-radius: 50%;
}
.parent {
width: 200px;
height: 200px;
background-color: red;
}
.child1 {
width: 150px;
height: 150px;
background-color: gray;
}
.child2 {
width: 100px;
height: 100px;
background-color: #fff;
}
按照上面的代码出来的页面是这样的:
和上面那个问题一样,都是由于margin塌陷,解决方法:
- 加
border
* {
margin: 0 auto;
padding: 0 auto;
box-sizing: border-box;
}
div {
margin: 25px;
border-radius: 50%;
/border: 1px solid red;
}
.parent {
/* border: 25px solid red; */
width: 200px;
height: 200px;
background-color: red;
}
.child1 {
/* border: 25px solid gray; */
width: 150px;
height: 150px;
background-color: gray;
}
.child2 {
/* border: 25px solid #fff; */
width: 100px;
height: 100px;
background-color: #fff;
}
- 加
padding
* {
margin: 0 auto;
padding: 0 auto;
box-sizing: border-box;
}
div {
margin: 25px;
border-radius: 50%;
/* border: 1px solid red; */
padding: 1px;
}
.parent {
width: 200px;
height: 200px;
background-color: red;
}
.child1 {
width: 150px;
height: 150px;
background-color: gray;
}
.child2 {
width: 100px;
height: 100px;
background-color: #fff;
}
- 加
overflow:hidden
* {
margin: 0 auto;
padding: 0 auto;
box-sizing: border-box;
}
div {
margin: 25px;
border-radius: 50%;
/* border: 1px solid red; */
/* padding: 1px; */
overflow: hidden;
}
.parent {
/* border: 25px solid red; */
width: 200px;
height: 200px;
background-color: red;
}
.child1 {
/* border: 25px solid gray; */
width: 150px;
height: 150px;
background-color: gray;
}
.child2 {
/* border: 25px solid #fff; */
width: 100px;
height: 100px;
background-color: #fff;
}
这样在看就不会有margin塌陷的问题存在了
