• 什么是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. Mac OS X 中使用SAP GUI的方法

    下载sap gui for mac 730 解压后 安装之前需要去oracle 官网下载jdk 6 然后运行 安装完成后配置登陆端 新建连接时,只需要配置Advanced 页签:勾选Expert Mo ...

  2. Keeplived 详解

    http://www.cnblogs.com/pricks/p/3822232.html

  3. 琐碎-关于hadoop2.2.0

    HDFS模块功能 namenode:主节点,存储文件的元数据如文件名.文件目录结构.文件属性(生成时间.副本数.文件权限).以及每个文件的块列表和块所在的datanode等: datanode:在本地 ...

  4. cocos2d-x lua 实现状态机

    cocos2d-x lua 实现状态机 version: cocos2d-x 3.6 0.状态机 状态机主要分为2大类:第一类,若输出只和状态有关而与输入无关,则称为Moore状态机:第二类,输出不仅 ...

  5. 解决TableView / ScrollView上的Menu问题（1滑出View区域还可点击2导致点击menu后View不能滑动）

    解决TableView / ScrollView上的Menu问题 1划出区域还可点击 重写CCMenu的触摸事件函数 TouchBegin/TouchMove/TouchCancle/TouchEnd ...

  6. Android（java）学习笔记117：英文朗诵android App编写实例

    1.首先,我先把代码放到下面: package com.himi.speaker; import java.util.Locale; import android.app.Activity; impo ...

  7. Google翻译，3个步骤灭绝人类

    今儿这事儿得从一个新闻说起:<谷歌又飙车了,刚发布了神经机器翻译系统,没见过的语言它也能翻译> 大家如果懒的看原文,可以直接看我这个简单白话列表: Google又出来嘚瑟了,发布了基于神经 ...

  8. App Thinning

    App Thinning 由于项目中需要开启Bitcode编译,之前对Bitcode也有些误区,故整理了下相关知识,仅供参考,如有不对,还请指出. 当前 iOS App 的编译打包方式是把适配兼容多个 ...

  9. centos 安装ss-QT5

    方法一(DNF指令): 1.如果未安装DNF,请跳转至:http://dev.fjuts.com:83/blog/index.PHP/Linux/261.html2.添加shadowsocks 的 c ...

  10. mysql数据库千万级别数据的查询优化和分页测试

    原文地址:原创 mysql数据库千万级别数据的查询优化和分页测试作者:于堡舰 本文为本人最近利用几个小时才分析总结出的原创文章,希望大家转载,但是要注明出处 http://blog.sina.com. ...