• 什么是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. C++第11周(春)项目2 - 职员有薪水了

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目2 - 职员有薪水了]定义一个名为CPe ...

  2. oc-07-有参方法的调用

    // 13-[掌握]有参方法的声明实现和调用 #import <Foundation/Foundation.h> void test(){ } @interface Person : NS ...

  3. struts开发经验汇总

    笔者接触struts2之时,对于web开发甚至还没有概念,仅有的知识是如何利用HTML.CSS和简单的JS进行静态网页的编写.对于开发一个网站所必需的后台.数据库基本没有了解. 因此这篇博文,可以说不 ...

  4. javascript编程的最佳实践推荐

    推荐的javascript编程的最佳实践,摘要记录在这里: 可维护的代码保证代码的性能部署代码 1 可维护的代码1.1什么是维护的代码:可理解性——其他人可以接手代码并理解它的意图和一般途径,而无需原 ...

  5. git workflows

    https://www.atlassian.com/git/tutorials/comparing-workflows Comparing Workflows The array of possibl ...

  6. [改善Java代码]构造代码块会想你所想

    建议37: 构造代码块会想你所想 镜像博文:http://www.cnblogs.com/DreamDrive/p/5413408.html http://www.cnblogs.com/DreamD ...

  7. Eclipse 中引用其他项目及项目打包

    1.建立工程project1; 2.建立class文件ClassA: package com.test; public class ClassA{ public static String getCl ...

  8. （浅谈）.Net控件GridView绑定数据

    前台GridView属性设置 <td> <asp:GridView ID="GridView" runat="server" AutoGene ...

  9. 使用PL/SQL删除百万条记录的大表

    使用PL/SQL删除百万条记录的大表: 最近开发人员对测试环境数据库进行了压力测试,数据库中产生了大量的脏数据.有几张大表里数据量均在百万甚至千万条的记录数.开发人员现提出需求如下: 只清理其中的部分 ...

  10. trigger,triggerhandler模拟事件

    常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使 ...