两个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
结论:当元素在垂直方向,两个相邻的元素之间增加上下外边距时,会出现外边距的叠加