【CSS问题】margin塌陷

CSS中的margin塌陷是一个常见的布局问题,主要发生在垂直方向上,当两个或多个元素的垂直margin相遇时,它们不会按照预期叠加,而是会发生重叠,导致最终的外边距值比单独设置时小。

一、margin塌陷的原因

  1. 同级元素:两个同级的元素,垂直排列,上面的盒子给margin-bottom,下面的盒子给margin-top,那么他们两个间距就会重叠,以大的那个盒子计算。
  2. 父子元素:子元素给一个margin-top,其父级元素也会受到影响,同时产生上边距,父子元素会进行粘连。

二、margin塌陷的示例

设想页面上有一个蓝色的矩形(.parent),它内部有一个粉色的矩形(.child)。由于margin塌陷,.child元素的margin-top实际上导致了整个.parent元素向下移动,使得.parent的顶部与页面顶部之间的间距增加了,而不是.child元素内部增加了间距。

三、解决margin塌陷的方法

1、避免同级元素margin重叠

可以使两个外边距不同时出现,即要么只设置上面的margin-bottom,要么只设置下面的margin-top

2、解决父子元素粘连

为父盒子设置border:为外层添加border后父子盒子就不是真正意义上的贴合,可以设置透明边框(border:1px solid transparent;)。

为父盒子添加overflow:hidden:这样可以触发父盒子的块级格式化上下文(BFC),从而避免margin塌陷。

为父盒子设置padding值:通过给父元素添加内边距,可以使得子元素的margin不再与父元素的顶部粘连。

改变父盒子的display属性:如设置为display:table;display:flex;等,都可以触发BFC,从而解决margin塌陷问题。

利用伪元素:给父元素的前面添加一个空元素,并设置该伪元素的样式以避免margin塌陷。

改变子元素的定位:如设置为position:absolute;,这样子元素就不再相对于父元素定位,而是相对于最近的已定位祖先元素定位(如果没有,则相对于初始包含块定位)。

3、触发BFC的其他方法

1、将元素的display属性设置为inline-blocktable-celltable-captionflow-rootflexinline-flexgridinline-grid等。

2、将元素的float属性设置为leftright等(非none)。

3、将元素的position属性设置为absolutefixed

四、注意事项

1、在解决margin塌陷问题时,需要根据具体的布局需求和元素关系来选择合适的方法。

2、触发BFC是解决margin塌陷的一种有效手段,但需要注意BFC对布局的其他可能影响。

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

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

相关文章

JavaScript高级篇 - 浏览器事件详解 DOM事件以及独立封装事件Util和Ajax封装

Dom事件 Model(特定领域对象的抽象)、Protocal(针对数据格式的约定) DOM(Document Object Model,文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加、移出和…

MinIO 的 S3 over RDMA 计划: 为高速人工智能数据基础设施设定对象存储新标准

随着 AI 和机器学习的需求不断加速,数据中心网络正在迅速发展以跟上步伐。对于许多企业来说,400GbE 甚至 800GbE 正在成为标准选择,因为数据密集型和时间敏感型 AI 工作负载需要高速、低延迟的数据传输。用于大型语言处理、实时分析和计算机视…

git config是做什么的?

git config是做什么的? git config作用配置级别三种配置级别的介绍及使用,配置文件说明 使用说明git confi查看参数 默认/不使用这个参数 情况下 Git 使用哪个配置等级? 一些常见的行为查看配置信息设置配置信息删除配置信息 一些常用的配置信…

使用 npm 安装 Yarn

PS E:\WeChat Files\wxid_fipwhzebc1yh22\FileStorage\File\2024-11\spid-admin\spid-admin> yarn install yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后…

常用在汽车PKE无钥匙进入系统的高度集成SOC芯片:CSM2433

CSM2433是一款集成2.4GHz频段发射器、125KHz接收器和8位RISC(精简指令集)MCU的SOC芯片,用在汽车PKE无钥匙进入系统里。 什么是汽车PKE无钥匙进入系统? 无钥匙进入系统具有无钥匙进入并且启动的功能,英文名称是PKE&…

机器学习基础05

目录 1.随机森林 1.1随机森林的介绍 1.2算法原理 1.3API 2.线性回归 2.1回归的含义 2.2线性回归 2.3损失函数 2.4多参数回归 2.5最小二乘法MSE 2.6API 1.随机森林 集成学习的基本思想就是将多个分类器组合,从而实现一个预测效果更好的集成分类器。 集成…

数据库范式、MySQL 架构、算法与树的深入解析

一、数据库范式 在数据库设计中,范式是一系列规则,用于确保数据的组织和存储具有良好的结构、完整性以及最小化的数据冗余。如果不遵循范式设计,数据可能会以平铺式罗列,仅使用冒号、分号等简单分隔。这种方式存在诸多弊端&#…

SQL面试题——奔驰SQL面试题 车辆在不同驾驶模式下的时间

SQL面试题——奔驰SQL面试题 我们的表大致如下 CREATE TABLE signal_log( vin STRING COMMENTvehicle frame id, signal_name STRING COMMENTfunction name, signal_value STRING COMMENT signal value , ts BIGINT COMMENTevent timestamp, dt STRING COMMENTformat yyyy-mm…

Hadoop生态圈框架部署(六)- HBase完全分布式部署

文章目录 前言一、Hbase完全分布式部署(手动部署)1. 下载Hbase2. 上传安装包3. 解压HBase安装包4. 配置HBase配置文件4.1 修改hbase-env.sh配置文件4.2 修改hbase-site.xml配置文件4.3 修改regionservers配置文件4.4 删除hbase中slf4j-reload4j-1.7.33.j…

YOLOv11改进,YOLOv11添加GnConv递归门控卷积,二次创新C3k2结构

摘要 视觉 Transformer 在多种任务中取得了显著的成功,这得益于基于点积自注意力的新空间建模机制。视觉 Transformer 中的关键因素——即输入自适应、长距离和高阶空间交互——也可以通过卷积框架高效实现。作者提出了递归门控卷积(Recursive Gated Convolution,简称 gnCo…

Queuing 表(buffer表)的优化实践 | OceanBase 性能优化实践

案例问题描述 该案例来自一个金融行业客户的问题:他们发现某个应用对一个数据量相对较小的表(仅包含数千条记录)访问时,频繁遇到性能下降的情况。为解决此问题,客户向我们求助进行分析。我们发现这张表有频繁的批量插…

CentOS 8 安装 chronyd 服务

操作场景 目前原生 CentOS 8 不支持安装 ntp 服务,因此会发生时间不准的问题,需使用 chronyd 来调整时间服务。CentOS 8以及 TencentOS 3.1及以上版本的实例都使用 chronyd 服务实现时钟同步。本文介绍了如何在 CentOS 8 操作系统的腾讯云服务器上安装并…

AI大模型(二):AI编程实践

一、软件安装 1. 安装 Visual Studio Code VSCode官方下载:Visual Studio Code - Code Editing. Redefined 根据自己的电脑系统选择相应的版本下载 安装完成! 2. 安装Tongyi Lingma 打开VSCode,点击左侧菜单栏【extensions】,…

Win10/11 安装使用 Neo4j Community Edition

如果你下载的是 Neo4j Community Edition 的压缩包,意味着你需要手动解压并配置 Neo4j。以下是详细的使用步骤: 0. 下载压缩包 访问Neo4j官网,找到 Community Edition 版本并选择 4.x 或者 5.x 下载:https://neo4j.com/deployme…

使用json配置动态区间及动态执行公式

背景 有时候可能线上一直需要调整公式或者区间以及参数等等,如果使用代码方式,将会变得比较麻烦,可以在redis或者数据库配置一份动态配置,让代码进行解析并执行,可以对公式以及参数等进行动态调节 需求 x 是估值&…

腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案

引入腾讯地图SDK <!--腾讯地图 API--><script charset"utf-8" src"https://map.qq.com/api/gljs?librariestools&v1.exp&key***"></script>构建地图容器 <div class"layui-card"><div class"layui-car…

Tiktok对接和内容发布申请流程

这段时间在搞AI生成视频&#xff0c;希望用户能一键发布到Tiktok&#xff0c;因此研究了一下Tiktok的开发者申请流程&#xff0c;发现好复杂&#xff0c;同时也发现Tiktok的开发也跟我一样&#xff0c;挺草台班子的 0、流程简述 废话不多说&#xff0c;Tiktok的开发者申请和…

企业生产环境-麒麟V10(ARM架构)操作系统部署kafka高可用集群

前言&#xff1a;Apache Kafka是一个分布式流处理平台&#xff0c;由LinkedIn开发并捐赠给Apache软件基金会。它主要用于构建实时数据流管道和流应用。Kafka具有高吞吐量、可扩展性和容错性的特点&#xff0c;适用于处理大量数据。 以下是Kafka的一些核心概念和特性&#xff1…

xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

打开 .sh 文件所在的终端窗口&#xff0c;执行终端命令&#xff1a;sh 文件名.sh&#xff0c;出现如下错误&#xff1a; 解决办法&#xff1a;

CC6学习记录

&#x1f338; cc6 cc6和cc1的国外链其实后半条链子是一样的&#xff0c;但是cc6的不局限于jdk的版本和commons-collections的版本。 回忆一下cc1的后半条链子&#xff1a; LazyMap.get()->InvokerTransformer.transform() 这里我们就结合了URLDNS链的思路&#xff0c;在…