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 清除周围 ...
随机推荐
- 一站式入口服务|爱奇艺微服务平台 API 网关实战 原创 弹性计算团队 爱奇艺技术产品团队
一站式入口服务|爱奇艺微服务平台 API 网关实战 原创 弹性计算团队 爱奇艺技术产品团队
- # Set the asyncio reactor's event loop as global # TODO: Should we instead pass the global one into the reactor?
daphne/server.py at master · django/daphne https://github.com/django/daphne/blob/master/daphne/serve ...
- linux上jar项目启动脚本
---------------启动:start.sh #!/bin/bashcd `dirname $0`BIN_DIR=`pwd`cd ..DEPLOY_DIR=`pwd`CONF_DIR=$DEP ...
- 【题解】CF952F 2 + 2 != 4
题目传送门 首先这道题没有翻译,这是很奇怪的,经过了(bai)查(du)字(fan)典(yi)之后,你会发现,什么用都没有-- 楼下的 dalao 们给的解释非常的模糊(果然还是我太弱了),于是我自己 ...
- VS Code 使用教程详解
一.写在前面 1.为什么选择 \(VS\) \(code\) 一款非常好用的代码编辑器 标准化 \(Language\) \(Service\) \(Protocol\) 内置调试器和标准化 \(De ...
- java项目相对路径
./的含义: eclipse相对路径是相对项目的src目录来说的,而不是相对于当前文件. "./某某文件.txt" 而idea则相对于项目根目录 "./src/某某文件. ...
- Spring Boot 核心配置文件 bootstrap & application
Spring Boot 核心配置文件 bootstrap & application 1.SpringBoot bootstrap配置文件不生效问题 2.bootstrap/ applicat ...
- Linux常用命令：性能命令
本文介绍Linux常用性能统计分析命令,监控进程或者系统性能.主要包括CPU(top.mpstat).内存(vmstat.free).I/O(iostat).网络性能(sar).系统日志信息(dems ...
- Python单元测试框架pytest常用测试报告类型
先前博客有介绍pytest测试框架的安装及使用,现在来聊聊pytest可以生成哪些测试报告 1.allure测试报告 关于allure报告参见先前的一篇博文:https://www.cnblogs.c ...
- File类以及IO流
1.File类 package LESSON12; import java.io.File; import java.io.IOException; import java.text.SimpleDa ...