简述CSS中margin折叠问题

最新推荐文章于 2024-03-26 09:10:16 发布
最新推荐文章于 2024-03-26 09:10:16 发布
阅读量103 收藏
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48169887/article/details/126834373
版权

margin折叠问题一般出现场景是在设置块级元素的内外边距时.

这里呢,我设置了三个块级元素,分别为d1,d2和d3

 运行结果如下:

 此时给d1设置20px的外边距会发现d1也随着d3移动了

 此时如果给d1设置上下外边距20px,p1与头部元素的边距应该是40px,现在我们来看看运行结果

 此时可以看出p1的外边距只有20,此时就是产生了margin折叠;

如果想设置p1的外边距为40,则设置p1或者p3任意的一个边距为40px

而内边距和外边距是一样的,他的边距不会是两个元素相加的结果,而是会选择一个最大边距作为边距

昵不称让我称啊？
关注
HTML、CSS、浏览器 相关面试题总结
m0_63621500的博客
03-28 373
1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以 jpeg 格式存储时，提供 11 级压缩级别 2. 请简述 css 盒子模型 一个 css 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填..
html+css+js基础问答
qq_43751465的博客
08-26 5211
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
详解css外边距折叠（margin collapsing）
weixin_34261415的博客
12-03 184
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下 前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： `<``style``>` `.sli...
CSS-margin折叠现象
Z417031的博客
09-18 250
CSS-margin折叠现象
CSS中margin的折叠问题
weixin_73186081的博客
09-18 192
简述css中margin折叠问题
深入理解CSS margin折叠
zxl1990_ok的博客
11-02 2409
什么是margin折叠？为什么会有margin折叠？什么时候会发生margin叠加？如何计算折叠边距？如何避免外边距叠加？
CSS--Margin折叠的两种情况
mvvm实现原理
01-19 398
本文简单总结一下css布局中常见的两种margin折叠情况，以及解决方法。 兄弟元素之间发生折叠： .box1, .box2{ width: 200px; hieght: 200px; margin: 20px; } <div class="box1">hello</div> <div class="box2">world</div> 大家...
【关于HTML文档标准流和css浮动的详细讲解】
muweichang的博客
05-02 917
什么是浮动标准文档流三微观现象三元素等级浮动认识浮动三级目录 标准文档流 在这里先说一下什么是标准文档流。 标准文档流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。及标签默认的排版方式 标准文档流：指的是元素排版布局过程中，标签的一个“默认”状态。元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 标准文档流的特点：三微观现象、三元素等级 三微观现象 空白折叠现象：无论写多少个空格（或者换行），
前端面试题3（html/css）
我好像还记得 愿望是什么
12-12 148
一、简述BFC规则特性，及解决的问题? 1、BFC规则 内部的标签会在垂直方向上一个接一个的放置 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。 BFC的区域不会与float的标签区域重叠 计算BFC的高度时，浮动子标签也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然 2、BFC解决的问题 解决外边距折叠 特性的第②条：垂直方向上的距离由ma
前端面试笔记-CSS篇
qq_46354688的博客
03-04 761
目录选择器的权重和优先级盒模型标准盒模型和替代模型（IE）块级盒子与内联盒子隐藏一个元素Position文档流定位z-index浮动如何清除浮动包含块与控制框BFC外边距折叠（合并外边距与BFC、margin叠加）margin塌陷BFC 可以包含浮动的元素（清除浮动）BFC 解决文字环绕的问题层叠上下文层叠水平层叠上下文的特性DisplayFlex布局Grid布局各种居中块级元素水平居中（左右居中）块级元素垂直居中负外边距绝对居中容器内居中**视区内居中**变形（Transform）flex块中不定行的文字
CSS框模型中外边距(margin)折叠图文详解
mimixiao345的专栏
09-14 1080
外边距折叠，指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。 　　触发条件：  毗邻，没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系  这些 margin 都处于普通流中，即非浮动元素，非定位元素 　　垂直方向外边距合并的计算 　　1) 参加
margin击穿问题(margin折叠问题)
weixin_42206785的博客
11-19 1214
问题如下 一段很简单的代码： css如下： &amp;lt;style type=&quot;text/css&quot;&amp;gt; *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; heig...
HTML5+CSS
weixin_67872098的博客
06-10 79
padding:10px 20px 30px 上 填充10px 左右 填充20px 下 填充30px。父元素下边的第一个子元素添加margin-top，这个margin-top会生效到父元素身上。给父元素添加padding-top解决此问题，但是要记得给父元素总体大小减去这个padding值。浮动元素会影响后边的同级未浮动元素，所以建议——要浮动，同级都浮动，要不浮动都别浮动。在使用浮动时，记得给父元素规定高度,不然会触发高度塌陷。浮动元素，在父元素中放不下的时候，会进行换行。
CSS基础-案例（伸缩布局）
weixin_45799003的博客
04-19 88
1.页面技巧： 先结构后布局；标签语义化；src防止不识别使用./； <body> <div class="container"> <!--头部--> <header> <a href="javascript:;"> <img src="./images/01.jpg" alt=""> </a> </header> <!
margin属性详解、盒模型的计算、box-sizing属性、行内块元素之间的相互转换、元素的隐藏
qq_44935762的博客
07-14 680
margin盒子外边距： 有四个方向 小属性 意义 margin-top 上margin，“向上踹” margin-right 右margin，“向右踹” margin-bottom 下margin，“乡下踹” margin-left 左margin，“向左踹” 竖直方向的margin有塌陷现象：小的margin塌陷到大的margin种，从而margin不叠加，只以大值为准 一些元素有默认的margin： 一些元素都有默认的margin，在开始制作的时候，要将他们
【CSS】margin的传递与折叠
最新发布
kakaai77的博客
03-26 451
垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin，这种现象叫做折叠（collapse）如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠，则这个块级元素的margin-top值会传递给父元素。显然，子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。
css-margin collapse外边距折叠
王欢的博客
07-13 3383
1.多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠折叠的结果：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。折叠的产生情况：1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。2.没有线盒，没有空隙（clearance，下
CSS中上下margin的传递和折叠
qq_52732369的博客
12-22 1384
CSS中上下margin的传递和折叠
css盒模型margin折叠问题解决方案总结
zerlinda_c的博客
11-26 2065
<div id = "header"> <div class = "header_cap"><h1>test</h1></div> </div>#header { width: 100%; height: 6rem; text-align: center; background-color: #CCC; overflow: hidden; }
简述网页中css的实现方式
03-26
网页中的CSS实现主要有以下三种方式： 1.内部样式表：在标签中使用标签定义样式，样式仅对当前页面有效。 2.外部样式表：将CSS代码集中到一个外部CSS文件中，然后在网页中使用标签引用该文件。 3.内联样式：在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值