css margin传递（塌陷现象）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 200+累计阅读 245平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

原创 2022-07-14 15:56:43 245 阅读 AI 写同款· GEO 优化 ›

【CSS知识点】——解决高度塌陷以及BFC详解高度塌陷以及BFC详解阅读详情

margin传递（塌陷现象）

互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。
只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
在这里插入图片描述

解决方案：

给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
给父元素设置padding-top来达到相同的效果
给父元素设置overflow:hidden（推荐使用，触发BFC）
将其中一个元素转换成行内块元素
给其中一个元素设置浮动：当父容器或子容器处于浮动时，就不存在margin传递问题了，因为已经脱离了文档流

收录于

前端零零散散

当前文章被收录于：

前端零零散散

27 篇文章 1 人学习

前端零零散散

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#css #css3 #html

CSS中Margin的注意问题 Margin中有三种问题一、同级塌陷谁小塌陷到大的里面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0... 阅读详情

相关推荐

在Modelsim中手动添加仿真库

缘由：在使用rom ip核的时候发现仿真需要altera_mf库的支持，而我的ModelSim没有这个库，所以想写一篇手动添加仿真库的文章方便自己以后使用：首先新建一个库，名字叫做altera_mf：然后编译对应的库文件：这里altera_mf.v文件是在quartus安装路径下quartus\eda\sim_lib文件夹下，点击编译后退出：最后在modelsim->example文件夹下可以找到编译好的库文件：

欢迎一起交流问题！ 3402

互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法

【代码】互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法。

qq_51758711的博客 564

Xilinx XDMA IP核配置实战：AXI Memory Mapped vs Stream选型指南（附PCIe调试技巧）

本文深入解析Xilinx XDMA IP核配置中AXI Memory Mapped与AXI Stream两种DMA接口的核心区别与选型策略。针对PCIe高速数据传输场景，详细对比了二者在数据特性、延迟、硬件资源及软件复杂度上的差异，为FPGA工程师在数据采集、实时处理等项目中做出高效设计决策提供实战指南，并附有关键的PCIe调试技巧。

qsc901234的博客 585

【CSS】margin的传递与折叠

垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin，这种现象叫做折叠（collapse）如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠，则这个块级元素的margin-top值会传递给父元素。显然，子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。

kakaai77的博客 663

Frida三层次钩子快速逆向VMP+OLLVM加固APK

VMP（虚拟机保护）和OLLVM（控制流平坦化）是Android应用常见的双重混淆技术，其核心原理是将Java逻辑虚拟化、Native代码控制流打散，从而阻断传统静态分析与简单Hook。但任何混淆都必须在CPU上执行，因此必然暴露JNI注册行为、ABI参数传递规律及系统调用痕迹。基于此，Frida可通过跨层联动——从JNI_OnLoad捕获Native库加载、在VMP解释器入口截获字节码上下文、于关键系统调用（如read/gettimeofday）反向追踪数据流——构建可观测、可复现的动态分析链。该方法无需

weixin_30888413的博客 1001

《LabVIEW ZYNQ实战指南》第6章＞＞案例解析：基于USB WiFi模块的ZYNQ无线通信部署与Linux RT开发

本文详细解析了如何为ZYNQ开发板部署USB WiFi模块，实现无线通信。通过LabVIEW Linux RT环境，利用封装好的驱动VI，开发者可轻松配置ZYNQ连接无线网络，摆脱网线束缚，实现程序无线部署与远程调试，为工业物联网应用奠定基础。

app77的博客 754

css-margin折叠塌陷、传递、一正一负时的表现

注意：块级元素默认的宽度是而不是默认情况下，块元素实际占用的父元素的内容区域，由外边距 + 边框线 + 内边距加上内容组成故上文提及的应理解为后剩余的宽度，也可以说为容器的100%简单的来说——块级元素默认情况下是占据父元素的内容中的一行，而行内元素因为没有上下内外边距所以，只计算左右内外边距，见“day6-内联元素、块、行内块、选择器权重”一文传递：如果块级子元素的顶部线与 父元素的顶部线——重叠，那么这 子元素 的的值将会传递给父元素，我们理想的情况是，元素距离的顶部20px，并且是紧挨着的而实际的

IshidaYoshiyama的博客 345

【SABRE 3D, SABRE 3DxT,LAM设备】2025年9月13日-安全配置-准备工作

请遵循本规程将SABRE 3D/3DxT/3D Scimitar系统设置为安全配置，以便能够在电镀单元、APT模块、XMM（或SRD）模块、工厂接口（FI）外壳或中央通道内部及周边区域执行作业p104-p117。在生产过程中暂停调度程序存在一定风险：若待维护模块未离线且在其他模块完成处理前重启调度程序，可能对生产晶圆造成影响。维护人员需特别注意电镀模块内的晶圆状态，并尽可能快速地恢复调度程序。确认待维护模块内无晶圆滞留暂停调度程序并将相应模块设置为离线状态打开模块检修门并关闭安全盖板（槽位）

weixin_46735260的博客 1363

CSS 关于margin你应该要知道的

1.margin与元素尺寸我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸示例： <div class="container"> <div class="child"></div&g

qq_43293207的博客 2774

SAP ABAP OData 的四种开发方式

摘要：SAP开发中CDS视图转OData服务的四种方案演进：1）7.40+版本需手动映射数据源；2）7.50+可直接引用CDS视图自动生成服务；3）7.50+通过@OData.publish注解声明式发布；4）7.54+采用服务定义与绑定实现协议解耦。新版本推荐使用最新方案，旧系统可选传统方式，整体呈现开发简化、架构解耦的技术演进趋势。（150字）

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 861

Android功耗系列专题理论之十一：高通QCOM平台待机功耗问题分析方法

本文详细介绍了高通QCOM平台待机功耗问题的分析方法。首先强调测试环境标准化的重要性，包括关闭无线功能、日志记录和非必要传感器。重点分析了硬件连接检查、驱动配置验证、电源管理策略优化等关键步骤。文章详细讲解了射频校准、时钟源/中断分析、子系统状态检查等专业技术方法，并提供了具体的命令行操作示例。此外还介绍了外设拆解、外灌电压测试等硬件排查手段，以及功耗分解板、波形分析等高级诊断技术。最后强调了固件版本验证和环境因素测试的必要性，为工程师提供了系统性的功耗问题排查思路。

770

CSS中上下margin的传递和折叠

qq_52732369的博客 1562

【Qt】QtCreator远程部署、调试程序

1）QtCreator 工具–> 选项 --> 设备 --> 添加2）设备设置向导选择–> Generic Linux Device --> 开启向导3）填写“标识配置的名称”（随便写）、设备IP、用户名 --> 下一步4）选择配对秘密文件，第一次配对，可以不填写，点击“下一步”5）点击“完成”6）设备添加成功，需要再配置SSH端口号、用户名、密码等7）保存SSH登陆密码：验证类型选择默认“Default”–> “创建新密钥”–> “Test”

郭老二 5193

margin塌陷传递现象

1.浮动元素不会产生margin塌陷现象

weixin_58526727的博客 130

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

Probability and Statistics - 4th edition

2021-07-12

margin塌陷所谓的塌陷在于不同元素的margin重叠合并了。兄弟元素塌陷：在于margin-top和margin-bottom，那大值显示那个。父子元素塌陷：在于子元素的margin-top会一直传递给父元素body，如果父元素也设置了margin-top则那个大显示那个。 ...

m0_52527367的博客 106

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的，已经排好版了，而且还是完整的，适合小白

【CSS】盒模型，水平格式化，垂直格式化，块布局经典示例，元素隐藏方法，CSS函数

❤️ Author：老九🙏 个人名言：不可控之事乐观面对。

李小浦的博客 440

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

第三章：CSS基础---盒模型、margin补充、溢出属性、单行文本溢出显示省略号、隐藏属性、宽度自适应(自己变化)、高度自适应(自己变化)、高度塌陷

img引入的图片会自带底部大约3px的留白block}

soulcow的博客 304

php内外边距,css选择器与内外边距--2019年9月3日 20点

一、相邻选择器与兄弟选择器实例html>Documentul{width:500px;height:50px;list-style:none;border:dashed1pxpink;padding:10px;}li{float:left;width:50px;height:50px;line-height:50px;background-color:blue;t...

weixin_39588104的博客 130

html左浮动左外边距,07-05(06|07)作业 外边距、内边距、浮动、定位的应用

一、外边距margin实例html>content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">内边距对盒子内容区的影响*{margin:0;padding:0;}body{background-color:#E9EAED;}.b...

weixin_42299131的博客 726

js知识点

js闭包 js作用域全局和局部 js作用域环境中访问变量的权利是由内到外，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能

qq_36981190的博客 121

盒模型：CSS 世界的物理法则，margin 塌陷与 padding 的恩怨情仇

为什么两个div的margin会“手牵手”变成一个人？为什么给元素加了padding，它就像充气一样变大了？今天我们用快递包裹的比喻，一次搞懂CSS盒模型的所有坑。

weixin_47352287的博客 1441

margin 塌陷问题

在 CSS 布局中，当两个垂直方向的元素嵌套时，子元素设置了 margin-top 或 margin-bottom，而父元素没有设置 padding 或 border 时，可能会出现子元素的 margin 值 “溢出” 到父元素外面，导致父元素也跟着移动的现象，这就是 margin 塌陷问题。父子元素：当父元素没有 padding 或 border 时，子元素的 margin-top 会传递给父元素，使得父元素产生塌陷，好像父元素被子元素的 margin 推开。margin 塌陷问题。

sinat_28005185的博客 692

margin 塌陷

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin 塌陷问题</title> <style type="text/css"> .outer{ width: 50

feiyangmystyle的博客 206

【Web】0基础学Web—浮动、浮动塌陷、层级、margin父子传递、表单高级特性

浮动元素会脱标，层级提高，会覆盖下边块级元素，不覆盖行级元素。浮动元素向一边移动，直到遇到父元素边缘或另一浮动元素边缘。/* 2.给父元素设置 overflow:hidden *//* 元素伪类选择器: a:link-a:hover *//* 1.设置高度(前提是高度确定) */如果子元素和父元素的上边框或下边框重叠，/* 去掉textarea缩放按钮 *//* 去掉input自带边框 */2.给父元素加padding。/* 选择聚焦的input *//* 3.伪元素消除 *//* 去掉聚焦后边框 */

2201_75539182的博客 1089

margin的塌陷现象跟合并现象

emmm，初学html,所以将自己所遇到的问题以及自己的解决方法给写下来。一、margin上边距造成的塌陷现象首先给出两个为父子关系的盒子，当子盒子加上margin-top:50px; 时就出现了问题。当我们给子盒子加上margin-top:50px; 结果却是父盒子也随着子盒子的移动跟着下来，这叫塌陷现象啦