外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距

发生外边距合并的三种基本情况

1. 相邻的兄弟姐妹元素

<div id="margin_parent">

<div><b>父margin-top: 80px，子margin-top: 50px，则最后margin-top为80px</b></div>

</div>

CSS

#margin_parent{

    width: 200px;

    height: 200px;

    background-color: green;

    margin-top:80px;

}

#margin_parent div{

    width: 200px;

    height: 200px;

    background-color: yellow;

    margin-top:50px;

    opacity: 0.5;

}

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

margin-top：块级父元素和其第一个子元素会发生上外边距合并

margin-bottom：块级父元素与它的最后一个子元素会发生下边距合并，要求：父元素没有border、padding、inline content、height、min-height、max-height等

<div id="margin_parent">

<div><b>父margin-top: 80px，子margin-top: 50px，则最后margin-top为80px</b></div>

</div>

CSS

#margin_parent{

    width: 200px;

    height: 200px;

    background-color: green;

    margin-top:80px;

}

#margin_parent div{

    width: 200px;

    height: 200px;

    background-color: yellow;

    margin-top:50px;

    opacity: 0.5;

}

3. 空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并

<p style="margin-bottom: 0px;background-color:green;">这个段落的和下面段落的距离将为50px</p>

<div style="margin-top: 50px; margin-bottom: 50px;"></div>

<p style="margin-top: 0px;background-color:green;">中间div的设置margin-top: 50px; margin-bottom: 50px;<br/>
两个会折叠成一个50px</p>
 

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

CSS margin合并的更多相关文章

  1. 影响CSS的margin合并的几个属性

    很多人知道,在CSS中存在Margin合并的现象,比如下代码: <style> div { margin:10px; height:100px; background:red; } < ...

  2. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  3. margin合并和浮动

    1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中 ...

  4. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  5. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  6. 须知的css——margin不重叠的情形

    margin重叠 摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse),产生的 ...

  7. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  8. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. margin合并及解决办法

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 水平方向不会发生合并 只有普通文档流中块框的垂直外边距才会发生外边距合并 ...

随机推荐

  1. GCC编译器原理（二）------编译原理一：目标文件

    一.目标文件 在 UNIX® 和 Linux® 中,任何事物都是文件.UNIX 和 Linux 编程实际上是编写处理各种文件的代码.系统由许多类型的文件组成,但目标文件具有一种特殊的设计,提供了灵活和 ...

  2. luogu 1268 树的重量

    打眼一看就是最小生成树嘛,但经过板子wa掉的经历后得知,,emmmm,原来是, 构造! (虽然不知是什么但觉得听起来很厉害的样子...手动微笑) n=2的情况 自然就是g(1,2) n=3的情况,由于 ...

  3. 快速学习 javascript

    // js 6种数据类型:字符串.数值.布尔值.undefined.null.object // 三种非数字的数字类型:Infinity -Infinity NaN var str = "H ...

  4. 【noip 2015】普及组

    T1.金币 题目链接 #include<cstdio> #include<algorithm> #include<cstring> using namespace ...

  5. tensorflow---alexnet training (tflearn)

    # 输入数据 import input_data mnist = input_data.read_data_sets("/tmp/data/", one_hot=True) imp ...

  6. mssql 创建函数简单实例

    CREATE FUNCTION [dbo].[f_DailyIncome] ( @userId int, @date date ) ,) AS BEGIN ,); ) from Channel_Use ...

  7. 第26月第3天 java gradle

    1. 430 /Applications/Android\ Studio.app/Contents/gradle/gradle-2.8/bin/gradle -v 434 mkdir gradle01 ...

  8. Git命令用于检查特定提交的差异

    假设你的提交日志如下(可以通过 git log 命名查看) commit 14af3315a2b1234daac74ece61ef913007043e06 Author: wuxianqiang &l ...

  9. 生成器的throw和close方法

    def gen_func(): try: yield 1 except Exception as e: pass yield 2 yield 3 yield 4 yield 5 return &quo ...

  10. SpringBoot 使用 MyBatis 分页插件 PageHelper 进行分页查询

    前言:本文档使用的是 SpringBoot,如果是 Spring 还需要在 MyBatis 配置 xml 中配置拦截器,并且 PageHelper 是针对 MyBatis 的,MyBatis 的集成不 ...