margin相关问题

margin塌陷问题#

正常的两个盒子

1
2
3
4
5
6
7
8
9
10
.outer {
    width: 300px;
    height: 300px;
    background-color: skyblue;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}
1
2
3
4
<div class="outer">
    <div class="inner">
    </div>
</div>

样式如下

image-20230324104144471

当给盒子 inner 添加一个外边距,margin: 100px;

理想中, 应该是这样

image-20230324104443856

然而并不是, 实际的结果是这样

image-20230324104541459

给inner的上外边距, 却意外的到了其父元素outer身上,

具体原因不太清楚, 应该是历史遗留问题, 关键词margin塌陷

较好的解决方案是给outer添加样式, overflow: hidden;

有时候可能会遇到margin并没有塌陷, 可能得原因是, 当父元素outer中存在padding(值不能为0) 或 border 时, 不会产生这样的问题

还有很多其他的方案, 比如定位、浮动等

margin合并问题#

1
2
3
4
5
6
7
8
9
10
11
12
.outer {
  width: 500px;
  height: 500px;
  background-color: skyblue;
  overflow: hidden;
}
.inner {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 100px 0;
}
1
2
3
4
<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

image-20230324110201930

解决方案: 根据实际所需margin设置即可