外边距合并

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

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

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. Pre-shared key

    Pre-shared key https://en.wikipedia.org/wiki/Pre-shared_key In cryptography, a pre-shared key (PSK) ...

  2. luogu 3396 哈希冲突 奇怪的根号

    这个题嘛开始一看实在想不出来有什么数据结构/算法可以乱搞,于是果断写了个朴素n方暴力,然后就发现luogu竟然有91分 这数据啊,也是醉了.. 想着优化优化能不能暴力卡过最后一个T掉的点,然鹅发现无耶 ...

  3. 【python小练】0010

    第 0010 题:使用 Python 生成类似于下图中的字母验证码图片 思路: 1. 随机生成字符串 2. 创建画布往上头写字符串 3. 干扰画面 code: # codeing: utf-8 fro ...

  4. web请求流程

    具体流程解析参考文章:浏览器请求发起处理

  5. 类中定义的方法，self参数

    class a(): def __init__(self): self.aa = 5 def test(): print "haha" a.test() self指的是对象本身,而 ...

  6. 将List的元素通过中文字符串排序

    类customer public class Customer { public String name; public int age; Customer(String name, int age) ...

  7. proxysql 系列 ~ 读写分离核心功能

    一 相关表介绍 1 mysql_user 列表配置    1 username && password 账号密码    2 default_hostgroup 默认的组ID2 mysq ...

  8. Django学习手册 - 基于requests API验证(一)

    验证需要知道requests提交数据的几种方式: GET 方式: # get 方式,传递数值可以直接通过url传递:(服务端接受 GET) requests.get(url='http://127.0 ...

  9. 第三节，CNN案例-mnist手写数字识别

    卷积:神经网络不再是对每个像素做处理,而是对一小块区域的处理,这种做法加强了图像信息的连续性,使得神经网络看到的是一个图像,而非一个点,同时也加深了神经网络对图像的理解,卷积神经网络有一个批量过滤器, ...

  10. SpringSecurity如何在代码中获取认证用户信息

    ⒈ public Object getCurrentUser(){ return SecurityContextHolder.getContext().getAuthentication(); } ⒉ ...