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 清除周围 ...
随机推荐
- Jmeter非GUI界面对阿里云服务器压测
一.Jmeter非GUI界面 参数讲解 讲解:非GUI界面,压测参数讲解 -h 帮助 -n 非GUI模式 -t 指定要运行的 JMe ...
- NIO非阻塞网络编程原理
NIO非阻塞网络编程原理 1.NIO基本介绍 Java NIO 全称 java non-blocking IO,是指 JDK 提供的新 API.从 JDK1.4 开始,Java 提供了一系列改进的 输 ...
- Simple decorator that intercepts connection errors and ignores these if settings specify this.
django-redis/cache.py at master · jazzband/django-redis https://github.com/jazzband/django-redis/blo ...
- namedtuple
Python的namedtuple使用详解_kongxx的专栏-CSDN博客_namedtuple https://blog.csdn.net/kongxx/article/details/51553 ...
- 使用Linux服务器来通过网络安装和激活Windows 7 —— 一些基本原理
使用Linux服务器来通过网络安装和激活Windows 7 -- 一些基本原理 https://www.pufengdu.org/blog/?p=372
- Linux的.a、.so和.o文件 windows下obj,lib,dll,exe的关系 动态库内存管理 动态链接库搜索顺序 符号解析和绑定 strlen函数的汇编实现分析
Linux的.a..so和.o文件 - chlele0105的专栏 - CSDN博客 https://blog.csdn.net/chlele0105/article/details/23691147 ...
- CSS居中的常用方式以及优缺点
前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...
- 在VMware15安装Ubuntu 16.04
安装环境: VMware15 VMware15官网地址:https://my.vmware.com/cn/web/vmware/info/slug/desktop_end_user_computing ...
- Spring Boot中进行Junit测试
Spring Boot新版本默认使用Junit5,pom依赖为: <dependency> <groupId>org.springframework.boot</grou ...
- C++类基本--随笔一
#include <iostream> using namespace std; class Teacher { public: Teacher(int m=3,int n=2) { a= ...