• 什么是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. adobe air 通用设置

    某些应用程序描述符设置对所有移动设备应用程序都很重要. 所需的 AIR 运行时版本 使用应用程序描述符文件的命名空间指定应用程序所需的 AIR 运行时版本. 在 application 元素中分配的命 ...

  2. Ruby on Rails Tutorial 第二章 之 微博资源

    1.微博模型如下图所示: 2.创建微博资源,命令如下: $ rails generate scaffold Micropost content:text user_id:integer  #生成微博资 ...

  3. the railway problem(the example of stack)

    this problem is a very classic problem which can use stack to solve. the problem can be searched thr ...

  4. Spring 3.1 Environment Profiles--转载

    原文地址:http://gordondickens.com/wordpress/2012/06/12/spring-3-1-environment-profiles/ Profiles Spring ...

  5. Helpers\Number

    Helpers\Number This helper has 2 methods for converting a number format and to get a percentage. Num ...

  6. ResponseBody的使用

    使用Spring的@ResponseBody有时还是挺方便的,在ajax调用返回纯字符串时有中文编码问题. @ResponseBody @RequestMapping(value="/dec ...

  7. [转]Oracle hang分析

    hanganalyze是ORACLE的一款性能诊断工具,这个款工具是从oracle 8.0.6开始可用,在oracle数据库出现严重的性能问题的时候它可以帮助你定位问题所在. 1.首先说说hangan ...

  8. Centos6.4最小化安装后使用xfce桌面环境

    由于我个人使用的Centos是在虚拟机中最小化安装的,gnome实在是不喜欢,所以自己装了个xfce,安装后启动不起来,才发现x window等依赖环境没装,为了少走弯路,在此写下安装过程. 1.yu ...

  9. 关于Talend的Patch分支对应Eclipse开发环境的配置总结.

    给产品打patch有时候会遇到很多问题,给产品打patch而且大多数是给很多老版本的Studio打,而且要有对应的patch的开发环境. 但是不巧有些patch对应的git仓库目录结构和一些其他版本的 ...

  10. 移动平台的meta标签-----神奇的功效（转）

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...