前言

之前在前端开发的过程中，都没有遇到外边距合并的问题（其实是因为大多时候都直接用前端样式库(〃'▽'〃)），这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。

问题

测试代码如下：

<!doctype html>

<html class="no-js" lang="">

<head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>test</title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<style>

* {

    margin: 0;

    padding: 0;

}

body {

    max-width: 750px;

    margin: 0 auto;

}

.div1 {

    background: yellow;

    height: 200px;

}

.div2 {

    background: blue;

    height: 200px;

}

.div2Child {

    background: red;

    height: 100px;

}

</style>

<body>

    <div class="div1">我是吃瓜群众</div>

    <div class="div2">

        <div class="div2Child" style="margin-top: 50px">我是子div</div>

        <p style="color: white">我是父div</p>

    </div>

</body>

</html>



子div设置了margin-top之后，父div也跟着一起margin-top了。

原因如下：

Margin Collapsing 外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，或外边距合并。

外边距合并的3中基本原因：

1、相邻的元素

毗邻的两个兄弟元素之间的外边距会合并

2、块级父元素与其第一个/最后一个子元素

  • 如果块级父元素中，不存在border, padding, inline part, block formatting context created, or clearance 来隔离第一个子元素的上边距，就会发送外边距合并现象。
  • 如果块级父元素，不存在border, padding, inline content, height, min-height, max-height来隔离下边距，则会和最后一个子元素合并。

3、空块元素

如果存在一个空的块级元素，不存在 border、padding、inline content、height、min-height来隔离上下外边距，那么它的上下外边距将会合并。

  • 当都为正数时，取两者中较大者。
  • 当都为负数时，取绝对值较大者。
  • 当一正一负时，取相加之和。
  • 外边距设为0时，这些规则也仍旧生效。

BFC（Block Formatting Context 块格式化上下文）与元素外边距合并 :

  • 当两个元素属于不同的BFC时，这两个元素的外边距不会合并。
  • 但在同一个BFC内，两个相邻元素的外边距仍会合并。

Block Formatting Context 块格式化上下文

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒模型出现的区域，也是浮动元素与其他元素进行交互的区域。

一个块格式化上下文由以下之一创建：

  • 根元素或一些包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素的 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • display隐式创建的匿名表格列，包括table, table-row, table-row-group, table-header-group, table-footer-group (这些都是html的默认样式), or inline-table
  • 具有overflow 且值不是 visible 的块元素，
  • display: flow-root
  • flex 项目
  • grid 项目
  • 多列容器（column-count 和 column-width 不是 auto, 包括 column-count: 1的元素）
  • column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

解决方案

知道了问题原因所在，以及了解了相关原理，就很好办了。

1、给div2设置border

为了不改变div2的大小，还需将设置 box-sizing为border-box将padding和border包含在定义的width和height之内

.div2 {

    background: blue;

    height: 200px;

    border-top: 1px solid transparent;

    box-sizing: border-box;

}

2、去掉div2Child的margin，改为设置div2的padding

.div2 {

    background: blue;

    height: 200px;

    padding-top:50px;

    box-sizing: border-box;

}

3、div2设置为内联元素

.div2 {

    background: blue;

    height: 200px;

    display: inline-block;

    width: 100%;

}

4、清除浮动

所有浮动元素包含在div2内，增加样式clearfix

.clearfix::before, .clearfix::after{

    overflow: hidden;

    display: table;

    visibility: hidden;

    content: '';

    clear: both;

}

或者创建一个新的BFC，使其在不同的上下文中，不合并外边距。

5、给div2设置Position

.div2 {

    background: blue;

    height: 200px;

    position: absolute;

    width: 100%;

    max-width: 750px;

}

6、给div2设置float，注意后面的元素需要clear浮动

.div2 {

    background: blue;

    height: 200px;

    float: left;

    width: 100%;

}

7、给div2设置display

.div2 {

    background: blue;

    height: 200px;

    display: inline-block;

    /*display: table;*/

    width: 100%;

}

8、给div2设置flex

.div2 {

    background: blue;

    height: 200px;

    display: flex;

    flex-direction: column;

}

9、给div2设置overflow

.div2 {

    background: blue;

    height: 200px;

    overflow: hidden;

}

万变不离其宗

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

CSS外边距合并&块格式上下文的更多相关文章

  1. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  2. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  3. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  4. CSS 外边距合并

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...

  5. CSS外边距合并问题

    今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. ...

  6. CSS 外边距合并。

    <div id = "parent"> <div id = "child"> demo </div> </div> ...

  7. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  8. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

  9. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

随机推荐

  1. 使用phpStorm编辑器进行PHP代码的xdebug调试

    首先需要安装Xdebug,如果没有安装可以查看PHP断点调试工具Xdebug的安装这篇文章.phpStorm是开发者经常用的一款编辑器,当然也支持Xdebug调试,下面说一下配置步骤. phpStor ...

  2. dojo表格操作的简单示例（建立表格）

    代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  3. .NET基础 （19）多线程

    多线程编程的基本概念1 请解释操作系统层面上的线程和进程2 多线程程序在操作系统里是并行执行的吗3 什么是纤程 .NET中的多线程1 如何在.NET程序中手动控制多个线程2 如何使用.NET的线程池3 ...

  4. leetcode-8-String to Integer (atoi) （已总结）

    8. String to Integer (atoi) Total Accepted: 93917 Total Submissions: 699588 Difficulty: Easy Impleme ...

  5. NTLM认证协议及SSPI的NTLM实现

    没错,NTLM就是你听说过的那个NTLM.是微软应用最广泛的认证协议之一. NTLM是NT LAN Manager的缩写,这也说明了协议的来源.NTLM 是 Windows NT 早期版本的标准安全协 ...

  6. linux bash变量替换（# ## % %% / //）

    VAR=hahaha echo ${VAR#*h} # ahaha 从前向后匹配删除 VAR=hahaha echo ${VAR##*h} # a 贪婪模式,从前向后匹配删除所有 VAR=hahaha ...

  7. 查看JVM

    通过jconsole.exe来查看,jconsole.exe所在目录为/%JAVA_HOME%/bin/jconsole.exe   需要配置: -Dcom.sun.management.jmxrem ...

  8. mysql 主从日志文件mysql-bin文件清除方法

    默认情况下mysql会一直保留mysql-bin文件,这样到一定时候,磁盘可能会被撑满,这时候是否可以删除这些文件呢,是否可以安全删除,是个问题,不建议使用rm命令删除,这样有可能会不安全,正确的方法 ...

  9. hdu X问题 （中国剩余定理不互质）

    http://acm.hdu.edu.cn/showproblem.php?pid=1573 X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory ...

  10. 激活IDEA,pycharm方法

    1.修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 ...