两个 float 的盒子,都是左浮动,外边距问题

两个float的盒子,都是左浮动,盒子 A 的margin-right为 100px,盒子 B 的margin-left为 200px,问盒子 A 与盒子 B 之间的间距是多少

html 代码

<div class="wrapper">
  <div class="box-a">A</div>
  <div class="box-b">B</div>
</div>

css 代码

.box-a,
.box-b {
  width: 100px;
  height: 100px;
  float: left; // 两个盒子都浮动
}

.box-a {
  background: pink;
  margin-right: 100px; // 盒子A右外边距100px
}

.box-b {
  background: #abcdef;
  margin-left: 200px; // 盒子B左外边距
}

具体测试结果

答案:A-B 之间的间距是 300px

结论:当元素横向方向外边距时,不会出现外边距迭代的问题

外边距叠加的问题

两个普通的盒子,盒子 A 的margin-bottom为100px，盒子 B 的margin-top为200px,问 A 盒子与 B 之间的距离是多少

html 代码

<div class="wrapper">
  <div class="box-a">A</div>
  <div class="box-b">B</div>
</div>

css 代码

.box-a,
.box-b {
  width: 100px;
  height: 100px;
}

.box-a {
  background: pink;
  margin-bottom: 100px;
}

.box-b {
  background: #abcdef;
  margin-top: 200px;
}

具体测试结果

答案: A-B 之间的间距是200px

结论:当元素在垂直方向,两个相邻的元素之间增加上下外边距时,会出现外边距的叠加