margin重叠

通常特性:
1.block水平元素(不包括float和absolute元素)
2.不考虑writing-mode,只发生在垂直方向(margin-top、margin-bottom)


三种情境:
1.相邻的兄弟元素
2.父级和第一个/最后一个子元素
3.空的block元素 自己和自己


1.相邻的兄弟元素 margin重叠


2父级和第一个/最后一个子元素


margin-top:
father 0,son 80,重叠一下,80
father 80,son 80 ,重叠一下,80


2.1父子元素margin-top发生重叠,原因?如何取消重叠?

1.父元素非块状格式化上下文元素

2.父元素没有border-top设置

3.父元素没有padding-top值

4.父元素和第一个子元素之间没有inline元素(图片。。文字。。。)分割


margin-bottom重叠的原因:
1.父元素非块状格式化上下文元素
2.父元素没有border-bottom设置
3.父元素没有padding-bottom值
4.父元素和最后一个子元素之间没有inline元素分割
5.父元素没有height、min-height、max-height限制


3.空block元素margin重叠


margin重叠的计算规则

1.正正取大值


2.正负值相加
3.负负最负值



垂直布局时,margin-top和margin-bottom都使用

http://www.imooc.com/video/12103

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 第一种 ——经典的相邻marign重叠的问题 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素...
    行不离书阅读 1,953评论 0 2
  • 作者:[zhengkonghong](https://coding.net/u/zhengkenghong) 本文...
    CODING_博客阅读 835评论 1 6
  • 朋友,你仍在老去 灵魂拉不动身体了呢 桃花开了 你有胆量看吗 看一眼刀尖上的深渊 朋友,黑夜踩了一万脚 脊柱弯弯曲...
    我是蝎大人阅读 258评论 4 2
  • 今天下午,我在学校的电教室里,给初一4个班的家长上了一节有关亲子教育的公益课。这是我主动向学校申请要上的一节课。我...
    江南木子阅读 347评论 0 0