margin
折叠塌陷、传递、一正一负时的表现
块级元素宽高的组成
注意:块级元素默认的宽度是width: auto
而不是100%
默认情况下,块元素实际占用的父元素的内容区域,由外边距margin
+ 边框线border
+ 内边距padding
加上内容组成
故上文提及的width: auto
应理解为100% - ( padding + border )
后剩余的宽度,也可以说为容器的100%
简单的来说——块级元素默认情况下是占据父元素的内容中的一行,而行内元素因为没有上下内外边距所以,只计算左右内外边距,见“day6-内联元素、块、行内块、选择器权重”一文
margin
向上级元素传递的问题
margin-top/bottom
的传递
margin-top
传递:如果 块级子元素的顶部线 与 父元素的顶部线——重叠,那么这 子元素 的margin-top
的值将会传递给父元素,我们理想的情况是,box
元素距离container
的顶部20px,并且container
是紧挨着top
的
![](https://img-blog.csdnimg.cn/img_convert/289f13286a8b42c981fbb16e31d0af7d.png)
而实际的效果是下方
![image-20231109195830853](https://img-blog.csdnimg.cn/img_convert/c1875b30e558721714ba3d0072b501c7.png)
<div class="top">top</div>
<div class="container">
<p>container</p>
<div class="box">
box
</div>
</div>
@mixin flex{
display: flex;
align-item: center;
justify-content: center;
font-size: 24px;
color: #fff;
}
.top{
height: 100px;
background-color: orange;
@include flex;
}
.container{
background-color: #cccccc;
position: relative;
&>p{
position: absolute;
left: 10%;
top: 40%;
}
.box{
margin: 20px auto 0 auto;
width: 600px;
height: 100px;
background-color: #1F5378;
@include flex;
}
}
margin-bottom
传递
如果 块级子元素 的 底部线 和 父元素 的 底部线 重叠,并且父元素高度为auto
,那么这个margin-bottom
会发生传递。这个和上一个问题一样,我们想要的效果是子元素距离父元素的底部20px,而实际效果如下
![image-20231109200652854](https://img-blog.csdnimg.cn/img_convert/a2c19bfecd53bd00f44bb07cc05edaf6.png)
<div class="container">
<p>container</p>
<div class="box">
box
</div>
</div>
<div class="bottom">bottom</div>
@mixin flex{
display: flex;
align-item: center;
justify-content: center;
font-size: 24px;
color: #fff;
}
.top{
height: 100px;
background-color: orange;
@include flex
}
.container{
background-color: #cccccc;
position: relative;
&>p{
position: absolute;
left: 10%;
top: 40%;
}
.box{
margin: 0px auto 20px auto;
width: 600px;
height: 100px;
background-color: #1F5378;
@include flex;
}
}
.bottom{
height: 100px;
@include flex;
background-color: #20c997;
}
解决方案
- 给父元素设置
padding-top/bottom
,值必须要大于0才能生效 - 给父元素设置
border
- 触发
BFC
块级上下文,比如给父元素设置overflow: auto
同级元素间margin
折叠/塌陷
margin-top/bottom
的折叠collapse
,俗称margin
塌陷,它通常指:
垂直方向上相邻两个块元素之间都设置margin
时,只有最大的margin
生效(两个元素直接的距离只有100px
而非预想的200px
)
注意:外边距折叠不止发生在兄弟元素上,嵌套的父子元素同样存在,例如内层元素的下边距发生了传递的同时父元素设置下边距,也会取较大的边距生效
![image-20231109202542597](https://img-blog.csdnimg.cn/img_convert/eb585598f6f652a73b47838c7fd4908c.png)
水平方向上的边距不会折叠
发生折叠后取值计算规则:取较大值作为视觉边距
解决方案
- 只写一个元素的边距
- 利用
BFC
机制
margin
折叠时一正一负的情况
某公司面试题,首先我们分为以下的情况
上负下正
|--负值大于正值
|--负值小于正值
下负上正
|--负值大于正值
|--负值小于正值
先说结论,只要是负值大,都是元素都会被向上吸收,结果为"负值+正值=向上偏移的距离";正直大,“正值+负值=向下偏移的距离”
上负下正
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
<div class="foot">foot</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #fff;
}
.top {
background-color: #3498db;
}
.middle {
background-color: #1abc9c;
margin-bottom: -10px;
}
.bottom {
background-color: #e67e22;
margin-top: 20px;
}
.foot {
background-color: #95a5a6;
}
负值小于正值:上负值-10px下正值20px,表现为上方元素距离下方元素10px
![](https://img-blog.csdnimg.cn/img_convert/d31936543861661da8565caa1745f879.png)
负值大于正值:上负值-20px下正值10px,表现为下方元素被上方元素吸收10px
![image-20231125204220690](https://img-blog.csdnimg.cn/img_convert/554175ffd19788e2cc8c5427a3c5f9e1.png)
上正下负
上20px,下-10px,表现为上方元素距离下方元素10px
上10px下-20px,表现为下方元素被上方元素吸收10px
-20231125204220690.png" alt=“image-20231125204220690” />
上正下负
上20px,下-10px,表现为上方元素距离下方元素10px
上10px下-20px,表现为下方元素被上方元素吸收10px