CSS margin collapsing All In One
CSS margin collapsing All In One
margin collapsing
margin 塌陷 / margin 合并
会出现 margin collapsing 的 3 种情况
️ 只有 margin-top 之间, margin-bottom 之间，margin-top 和 margin-bottom 之间才会出现 margin 合并！
️ 在 margin-left 与 margin-bottom 不存在 margin 合并！
相邻兄弟元素
没有内容隔开的父子元素
空的块级元素
demos
See the Pen css margin collapsing （1. 相邻兄弟元素） by xgqfrms
(@xgqfrms) on CodePen.
See the Pen css margin collapsing （2. 没有内容隔开的父子元素） by xgqfrms
(@xgqfrms) on CodePen.
See the Pen css margin collapsing （3. 空的块级元素） by xgqfrms
(@xgqfrms) on CodePen.
margin 合并后, margin 大小的计算方法
++, max +
--, min -
+-, sum
- 同为正数，取大的正值(正)
Math.max(10px, 20px) = 20px
- 同为负数，取小的负值(负)
Math.min(-10px, -20px) = -20px
- 一正一负，取求和后的值(可正可负)
10px + -20px = -10px
BFC
BFC 触发条件
https://www.cnblogs.com/xgqfrms/p/12764046.html
demos
See the Pen css margin collapsing all in one by xgqfrms
(@xgqfrms) on CodePen.
refs
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
504 Gateway Timeout
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/504
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
CSS margin collapsing All In One的更多相关文章
- 小记css的margin collapsing
近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- 外边距塌陷 margin collapsing
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹 ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- CSS——margin
CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...
- CSS Margin（外边距）
CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...
- CSS：CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
随机推荐
- IE双击打不开解决办法
方法1 [百度电脑专家]一键修复 建议下载并安装[百度电脑专家],官网:http://zhuanjia.baidu.com .打开[百度电脑专家],在搜索框内输入"IE修复",在搜 ...
- LOJ10076
USACO 2006 Nov. Gold 贝茜把家搬到了一个小农场,但她常常回到 FJ 的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而 ...
- 十四：SpringBoot-配置MongoDB数据库，实现增删改查逻辑
SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...
- Prometheus-process exporter-进程监控
Prometheus-process exporter-进程监控 1.下载安装 2.修改配置文件 3.启动 相关内容原文地址: 博客园:落烨无痕:process exporter 配置项解释 huan ...
- 深入理解java虚拟机，GC参考手册
深入理解java虚拟机 一.<深入理解Java虚拟机> 1.第2章 Java内存区域与内存溢出异常 2.第3章 垃圾收集器与内存分配策略 3.第4章 虚拟机性能监控与故障处理工具 4.第5 ...
- Tomcat Context容器和Wrapper容器
前言 Wrapper容器 前言 Context容器是一个Web项目的代表,主要管理Servlet实例,在Tomcat中Servlet实例是以Wrapper出现的,现在问题是如何才能通过Context容 ...
- 自定义tree
function YpTreeMenu(ypTreeMenu,treeObj) { this.ypTreeMenu=ypTreeMenu; this.treeObj=treeObj; this.tre ...
- docker（2）CentOS 7安装docker环境
前言 前面一篇学了mac安装docker,这篇来学习在linux上安装docker 环境准备 Docker支持以下的CentOS版本,目前,CentOS 仅发行版本中的内核支持 Docker. Doc ...
- Codeforces Round #604 (Div. 2) A. Beautiful String（贪心）
题目链接:https://codeforces.com/contest/1265/problem/A 题意 给出一个由 a, b, c, ? 组成的字符串,将 ? 替换为 a, b, c 中的一个字母 ...
- Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task（枚举/最大连续子序列）
题目链接:https://codeforces.com/contest/1359/problem/D 题意 有一个大小为 $n$ 的数组,可以选取一段连续区间去掉其中的最大值求和,问求和的最大值为多少 ...