专栏首页itclanCoderCSS篇-面试题4-外边距问题

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

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

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

本文分享自微信公众号 - itclanCoder(itclanCoder),作者:随笔川迹

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React学习(二)-深入浅出JSX

    在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

    itclanCoder
  • React基础(2)-深入浅出JSX

    在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

    itclanCoder
  • 小程序-实现自定义动画弹框/提示框

    在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等

    itclanCoder
  • css - Grid网格布局

    xing.org1^
  • 三分钟学会用 js + css3 打造酷炫3D相册

    剽悍一小兔
  • CSS入门13-单位详解

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 你的Redis有类转换异常么

    •该异常不是必现的,偶尔才会出现;•出现该异常后重启应用或者过一会就好了;•序列化协议使用了hessian。

    luoxn28
  • 商品的扩展属性及相关——开篇说在前面大纲

      其实早就想写这方面的了,只是由于各种原因一直拖到现在。终于开始动笔了。另外过了这么多年了,也不知道这种做法是否已经过时了。

    用户1174620
  • 为什么区块链货币价格总是剧烈波动?

    程序你好
  • 《敏捷软件开发:原则、模式与实践》笔记(3)

    敏捷团队不会花费许多时间去预测未来的需求和需要,也不会试图在今天就构建一些基础结构去支撑那些他们认为明天才会需要的特性。

    sickworm

扫码关注云+社区

领取腾讯云代金券