CSS篇-面试题4-外边距问题

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

━━━━━━

两个 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

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

---

公众号（ID：itclanCoder）

码能让您早脱菜籍，文能让您洗净铅华

  可能您还想看更多：

CSS篇-面试题2-如何让一个长度未知的图片水平和垂直方向均居中

CSS篇-面试题1-画一下盒子模型

小程序-云开发-实现微信云支付功能

喜欢就点个在看再走吧