• 什么是margin折叠：当两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。

    • 注意：
                          (1)  只有普通文档流中块框的垂直外边距才会发生外边距叠加
                          (2)  行内框、浮动框或绝对定位框之间的外边距不会叠加
                          (3)  折叠后取其中最大的那个margin值作为最终值
  • 垂直外边距叠加有三种情况：
               (1)  元素自身叠加  ：当元素没有内容(即空元素)、内边距、边框时，它的上下边距就相遇了，即会产生叠加(垂直方向)。当为元素添加内容、内边                                                距、边框任何一项，就会取消叠加。
               (2)  相邻元素叠加 ： 相邻的两个元素如果它们的上下边距相遇，即会产生叠加
               (3)  包含(父子) 元素叠加     包含元素的外边距 隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生叠加。添加                                            任何一项都会取消叠加

//两个p标签的上下间距为100px , 而不是200px , 发生了折叠

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

<title></title>

<style type="text/css">

p{

margin:100px;

}

</style>

</head>

<body>

  <p>这是第一段</p>

  <p>这是第二段</p>

</body>

</html>
  • 需要注意的一点是： 在水平书写模式下发生margin 折叠的是垂直方向( 即margin-top/margin-bottom).而在垂直书写模式下，margin折叠发生在水平方向上( 即margin-left/margin-right)
如何避免margin折叠
  • 首先总结一下margin折叠的条件：

    • margin折叠只发生在块元素上
    • 浮动元素不与其他元素margin折叠
    • 定义了overflow属性且值不为visible的块元素，不与它的子元素发生margin折叠
    • 绝对定位元素的margin不与其他任何margin折叠
    • 如果常规流中的第一个块元素没有border-top、padding-top , 且其第一个浮动的块级子元素没有间隙，则该元素的上外边距会与其常规流中的第一个块级子元素的上外边距折叠
  • 取消margin折叠：
    • 将元素改为非块级元素
    • 浮动
    • 定位
    • 设置属性 overflow:hidden 等方法

参考文章：　

margin折叠的更多相关文章

  1. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  2. margin折叠及hasLayout && Block Formatting Contexts

    margin折叠的产生有几个条件: 这些margin都处于普通流中,并在同一个BFC中: 这些margin没有被非空内容.padding.border 或 clear 分隔开: 这些margin在垂直 ...

  3. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  4. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  5. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  6. margin css的外边距

    h2{margin:10px 0;} div{margin:20px 0;} ...... <h2>这是一个标题</h2> <div> <h2>这是又一 ...

  7. [转]如何解决外边距margin叠加的问题探讨

    两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠,那么如何使元素上下margin不折叠呢?下面的方法或许对大家有所帮助 一.首先你要知道什么情况下会触发:两个或多个毗邻的普通流中的块 ...

  8. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  9. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

随机推荐

  1. iOS开发——动画篇Swift篇&动画效果的实现

    Swift - 动画效果的实现   在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...

  2. 简化版可用于多线程的logger

    logger 嘛要高效,要简单.废话不多话. GitHub 地址 https://github.com/goldli/logger 本文所说的logger使用System.Logger做为NameSp ...

  3. C++11 类内初始化

    C++11新标准规定,可以为数据成员提供一个类内初始值.创建对象时,类内初始值将用于初始化数据成员.没有初始值的成员将默认初始化. 对类内初始值的限制与之前介绍的类似:或者放在花括号里,或者放在等号右 ...

  4. Branch and Bound:分支限界算法

    http://blog.sciencenet.cn/blog-509534-728984.html 分支定界 (branch and bound) 算法是一种在问题的解空间树上搜索问题的解的方法.但与 ...

  5. python首次尝试——hello world

    百忙之中抽空学习python,但是令人惊讶的是连hello world都写不出来.

  6. javascript获取鼠标位置

    首先不同浏览器中event位置属性的分析: 1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event. ...

  7. 一种快速求fibonacci第n个数的算法

    利用动态规则的思路,摒弃传统的递归做法,可以得到一种快速的求fibonacci第n个数的算法: ''' 求第n(从1开始)位fibonacci数 fibonacci数列前两位为0, 1. 后面每一位数 ...

  8. Redis 哈希(Hash)

    Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). 实例 red ...

  9. Last non-zero Digit in N!

    Problem Description The expression N!, read as "N factorial," denotes the product of the f ...

  10. Calendar Game

    http://poj.org/problem?id=1082 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4820   A ...