【CSS】外边距折叠(margin 塌陷)

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。

规则如下:

  • 两个或多个毗邻的普通流中的块元素垂直方向上的 margin会折叠
  • 浮动元素 / inline-block元素 / 绝对定位元素 / 行内元素的margin不会和垂直方向上的其他元素的margin折叠
  • 创建了块级格式化上下文(BFC)的元素,不会和它的子元素发生margin折叠

我们可以利用外边距塌陷进行很多操作:

  • 居中
    .divA {height: 80px;width: 200px;background: #6ddb14;margin-bottom: 40px;}.divB {height: 40px;width: 200px;background: #0f80a2;margin-top: -100px}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网站项目】046人事管理信息系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

锁优化的方法

减少锁持有时间 减少锁粒度 将大对象拆分成小对象,增加并行度,降低锁竞争。ConcurrentHashMap允许多个线程同 时进入 锁分离 根据功能进行锁分离ReadWriteLock在读多写少时,可以提高性能。 锁消除 锁消除是发生在编译器级别的一种锁优化…

解放网工双手-SNMP如何做好运维辅助?

1. SNMP为什么被誉为“网管神器”? 2. SNMP不同版本有何区别? 3. SNMP有哪些问题及Telemetry有何优势? ---- SNMP ----- 简单网络管理协议 U2000:传输设备管理 企业,银行 esight:华为 iMaster NCE-Camp…

编码世界探秘:原反补码与实数表示,含定点、浮点及BCD编码

数值的编码表示 整数编码表示 在计算机中,因为只有0和1这两种形式,但为了表示数的正(),负(-)号,就要将数的符号以0和1编码。 通常把一个数的最高位定义为符号位,用0表…

#Z0458. 树的中心2

题目 代码 #include <bits/stdc.h> using namespace std; struct ff {int z,len; }; vector<ff> vec[300001]; int n,u,v,w,dp[300001][2],ans 1e9; void dfs(int x,int fa) {for(int i 0;i < vec[x].size();i){ff son vec[x][i];if(son.z ! fa){dfs(son.z,…

保护个人信息安全,避免成为“互联网中的裸泳者”

⚽️ 一、互联网中的裸泳者&#x1f3c0; 二、代理 IP 的应用 - 解锁无限可能⚾️ 三、代理 ip 的几种类型 3.1 动态住宅代理&#xff08;Rotating Residential Proxy&#xff09;3.2 静态住宅代理&#xff08;Static Residential Proxy&#xff09;3.3 动态长效ISP&#xff08…

LLM之RAG实战(二十四)| LlamaIndex高级检索(三):句子窗口检索

这是本系列关于高级检索技术的第三篇文章&#xff0c;之前的两篇分别介绍构建基本的RAG和父文档检索技术&#xff0c;本文我们将深入研究句子窗口检索技术。我将介绍如何设置它&#xff0c;并使用TruEval来测量其性能&#xff0c;并将其性能与我们在前几篇文章中介绍的其他技术…

华清作业day52

代码&#xff1a; #include <stdlib.h> #include <stdio.h> typedef struct Node {char data;struct Node *lchild;struct Node *rchild; }*Tree; //申请空间 Tree create_space() {Tree t (Tree)malloc(sizeof(struct Node));if(NULL t){return NULL;}t->da…

深度神经网络中的BNN和DNN:基于存内计算的原理、实现与能量效率

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言引言内存计算体系结构深度神经网络&#xff08;DNN&#xff09;随机梯度的优…

中国好书2024推荐│《富而喜悦》唐乾九 片段节选

当你打开了这枚锦囊时&#xff0c;我为你感到骄傲&#xff0c;相信阅读至此&#xff0c;你已经比很多人更能了解如何过上富而喜悦的人生了。如果你不只是阅读&#xff0c;甚至已经把先前的内容带到生活中去见习过的话&#xff0c;此刻的你一定有更多的感触。我希望你能试着去组…

【Linux网络编程二】网络基础2(网络框架)

【Linux网络编程二】网络基础2&#xff08;网络框架&#xff09; 一.数据如何跨网络传输1.源ip和目的ip2.路由器的使命3.Mac地址的使命 二.网络通信的本质三.端口号1.存在意义2.实现原理 四.认识协议1.TCP协议2.UDP协议 五.网络字节序六.通用网络接口 一.数据如何跨网络传输 在…

【算法与数据结构】718、1143、1035、392、115、LeetCode最长重复子数组+最长公共子序列+不相交的线+判断子序列+不同的子序列

文章目录 一、718、最长重复子数组二、1143、最长公共子序列三、1035、不相交的线四、392、判断子序列五、115、不同的子序列六、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、718、最长重复子数组 思路分析&#xff1…

问题:下列哪些属于历史文化资源的特征( ). #学习方法#学习方法

问题&#xff1a;下列哪些属于历史文化资源的特征( ). A、稀缺性 B、脆弱性 C、可再生性 D、多样性 参考答案如图所示

C语言函数递归详解

递归是什么&#xff1f; 递归&#xff0c;顾名思义&#xff0c;就是递推和回归。 递归是一种解决问题的方法&#xff0c;在C语言中&#xff0c;递归就是函数自己调用自己。 #include <stdio.h> int main() {printf("hehe\n");main();//main函数中⼜调⽤了main…

如何部署Linux AMH服务器管理面板并结合内网穿透远程访问

文章目录 1. Linux 安装AMH 面板2. 本地访问AMH 面板3. Linux安装Cpolar4. 配置AMH面板公网地址5. 远程访问AMH面板6. 固定AMH面板公网地址 AMH 是一款基于 Linux 系统的服务器管理面板&#xff0c;它提供了一系列的功能&#xff0c;包括网站管理、FTP 管理、数据库管理、DNS 管…

复旦大学NLP团队发布86页大模型Agent综述

复旦大学自然语言处理团队&#xff08;FudanNLP&#xff09;发布了一篇长达86页的综述论文&#xff0c;探讨了基于大型语言模型的智能代理的现状和未来。该论文从AI Agent的历史出发&#xff0c;全面梳理了基于大型语言模型的智能代理现状&#xff0c;包括LLM-based Agent的背景…

优秀学习网站推荐-第一辑

原文地址&#xff1a;https://jaune162.blog/2024/02/15/study-website-recommend Developer Roadmaps&#xff08;开发者路线图&#xff09; 官网地址&#xff1a;https://roadmap.sh/ 该网站包含了各个方向、各个语言的开发人员从零开始学习的路线图。 下图为Java方向的学…

Jenkins配置http请求github,发布release

学无止境&#xff0c;气有浩然&#xff01; Jenkins配置http请求github&#xff0c;发布release 前言Jenkins配置github配置在这里插入图片描述 打完收工! 前言 工作中进行了github迁移&#xff0c;原先的gitlab中配置的Jenkins的CI/CD步骤需要发布到Github发布release版本&am…

2024年人工智能可以报考的证书有哪些

人工智能&#xff08;AI&#xff09;是致力于解决通常与人类智能相关联的认知性问题的计算机科学领域&#xff0c;这些问题包括学习、创造和图像识别等。现代组织从各种来源收集大量数据&#xff0c;例如智能传感器、人工生成的内容、监控工具和系统日志。人工智能的目标是创建…

LeetCode:292.Nim 游戏

大一开学到现在&#xff0c;我不禁思考一个问题&#xff1a;代码重要吗&#xff1f; 我的答案是&#xff0c;根本不重要&#xff0c;或者说&#xff0c;是次要的。我认为分析问题&#xff0c;和画图是写题的开始&#xff0c;方法的学习&#xff0c;和灵活运用是目的。代码从来…