css margin传递（塌陷现象）

已于 2022-07-14 15:56:43 修改
阅读量201 收藏
点赞数
分类专栏： 前端零零散散 文章标签： css css3 html
于 2022-07-13 15:22:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/http____/article/details/125694990
版权

margin传递（塌陷现象）

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


解决方案：

  1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）

  2. 给父元素设置padding-top来达到相同的效果
    在这里插入图片描述

  3. 给父元素设置overflow:hidden（推荐使用，触发BFC）

  4. 将其中一个元素转换成行内块元素

  5. 给其中一个元素设置浮动：当父容器或子容器处于浮动时，就不存在margin传递问题了，因为已经脱离了文档流

CSS-高度塌陷布局乱问题详解
主营前端方向，技术栈是vue
11-15 1085
高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)
【CSS知识点】——解决高度塌陷以及BFC详解
m0_50785976的博客
10-29 362
高度塌陷以及BFC详解
css中margin的传递
ojb98K的博客
05-23 999
/* 上下margin会传递，在子容器和父容器顶部线相同时 */ margin-bottom传递需要父容器的height为auto 如何防止margin传递 1.给父元素设置padding-top 2.给父元素设置boder 3.触发bfc (block format content): * 浮动可以触发 * 设置一个元素的overflow为非vis...
【CSS】margin的传递与折叠
最新发布
kakaai77的博客
03-26 522
垂直方向上两个相邻的margin(margin-top和margin-bottom)有可能合并为一个margin，这种现象叫做折叠（collapse）如果块级元素的底部线和父元素的底部线重合，并且父元素的高度为auto，那么这个块级元素的margin-bottom值会传递给父元素。如果块级元素的顶部线和父元素的顶部线重叠，则这个块级元素的margin-top值会传递给父元素。显然，子元素的marin-top值传递给了父元素。子元素的margin-bottom传递给了父元素。两个块级元素之间的折叠。
css中margin传递问题
qq_37805832的博客
09-07 1047
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .father { width: 200px; height: 200px; back
CSS中上下margin的传递和折叠
qq_52732369的博客
12-22 1455
CSS中上下margin的传递和折叠
CSS margin出现传递和合并的问题
今天的我还菜嘛
01-15 873
margin在使用过程中往往会出现难以预料的问题，比如在垂直方向会出现兄弟元素合并问题、父子元素传递问题。 上下margin传递（左右不会传递）： margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素； margin-bottom传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素； 解决办法： 触发BFC，设置overflow为auto/hidden
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 1062
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
CSS中Margin的注意问题
qq_43623306的博客
05-23 806
Margin中有三种问题 一、同级塌陷 谁小塌陷到大的里面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
四、margin存在问题、内联标签使用边距、最大最小宽高、背景相关样式、进阶选择器、css三大特性
qq_52426181的博客
11-27 500
一、margin存在问题 1.重叠问题 问题：两个兄弟元素同时设置margin-top和margin-bottom，会出现重叠，取最大值 解决办法： 避免两个同时设置，只给其中一个方向设置 给其中一个盒子套一个大盒子括起来，给大盒子设置overflow:hidden;形成私有区域 2.塌陷问题 问题：父元素里的第一个子元素设置margin-top,会传递给父元素 解决办法： 避免使用margin-top 给父元素设置padding-top:1px； 给父元素设置border-top:1p
css-margin折叠塌陷、传递、一正一负时的表现
IshidaYoshiyama的博客
11-26 252
注意：块级元素默认的宽度是而不是默认情况下，块元素实际占用的父元素的内容区域，由外边距 + 边框线 + 内边距加上内容组成故上文提及的应理解为后剩余的宽度，也可以说为容器的100%简单的来说——块级元素默认情况下是占据父元素的内容中的一行，而行内元素因为没有上下内外边距所以，只计算左右内外边距，见“day6-内联元素、块、行内块、选择器权重”一文传递：如果 块级子元素的顶部线 与 父元素的顶部线——重叠，那么这 子元素 的的值将会传递给父元素，我们理想的情况是，元素距离的顶部20px，并且是紧挨着的而实际的
互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法
qq_51758711的博客
10-19 498
【代码】互相嵌套的块元素，使用margin-top，导致父元素向下移动的解决方法。
CSS 关于margin你应该要知道的
qq_43293207的博客
04-04 2576
1.margin与元素尺寸 我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸 示例： <div class="container"> <div class="child"></div&g
css之子容器宽度100%，设置margin后超出父容器
铁锤妹妹的博客
01-06 3029
2022年开年第一篇，很庆幸一直能学到新的东西，生命不息奋斗不止！ 回顾这一年，从刚开始的学习定义变量到现在可以独立完成一个模块的功能，技术上确实长进不少，也深深地感受到你知道的越多，你不知道的越多； 希望在新的一年里技术更上一个台阶，工资越来越多，嘻嘻(#.#) 话不多说，开干吧~ 一. 问题 我们发现，需要设置一定边距时，如果子容器设置宽度为100%，然后设置了margin，会超出父容器的宽度溢出。 .renderList { width: 100%; background: #f
解决给子元素设置margin-top后，会影响父元素一起向下移动；
liuwenjie_的博客
09-18 1446
给子元素设置margin-top后，会影响父元素一起向下移动； 代码片 .parent { height: 400px; width: 400px; background-color: blue; } .child { height: 100px; width: 100px; background-color: brown; /* margin-top:100px;*/
【css】使用margin时易出现的错误
汪小穆的博客
05-26 1949
前言：margin在布局的时候还是蛮常用到，不过margin还是容易产生一些问题的。   一、margin-top传递给了父级。 &lt;body&gt; &lt;style&gt; body { margin:0; background:pink; } .box1 { width:200px; height:200px; background:#333;} .box2 { width:1...
CSS margin属性详解
man_tutu的博客
02-11 6951
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性，也就是说给父元素设置的margin值并不会自动传递到子元素中。
css 子级元素设置margin-top父级元素会跟着移动问题解决
weixin_67375532的博客
06-19 3051
关于嵌套盒子时css 子级元素设置margin-top父级元素会跟着移动的问题原因以及解决办法
如何消除子容器的margin-top给父容器造成的合并margin影响。
随缘的专栏
01-05 5922
我们都知道，在CSS的盒模型中，当子容器设置了margin-top之后，父容器也会受到相应的影响，如下图所示 要解决这种情况，通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么，有没有别的办法可以解决这个问题呢？ 答案是有的！ 我们发现此时的父容器并没有使用border属性或padding属性，可是当我们加上这两个属性中的某一个之后，上
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知-_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值