CSS-margin塌陷问题

原创 已于 2022-09-12 18:28:00 修改 · 560 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

于 2022-09-12 18:21:53 首次发布
本文详细介绍了CSS中margin塌陷的现象，即在父子嵌套的块级元素中，子元素的margin-top会影响父元素的位置。通过解释Block Formatting Context（BFC）的概念，阐述了如何利用BFC来避免margin塌陷。触发BFC的方法包括设置float、overflow、position和display属性，这些方法可以帮助开发者更好地控制元素的布局和间距。

文章目录

1、什么是margin 塌陷

1、场景

互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

2、结果

导致父元素一起往下移动

父子嵌套的元素垂直方向的margin取最大值

2、如何解决

1、BFC

什么是BFC和作用

Block Formatting Context，中文叫块级格式上下文。

CSS将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则，它能根据这个规则将写的HTML元素绘制出来，但是我们可以通过一些特定的手段触发BFC，让其所符合的语法规则和原来的语法规则有点不一样。

如何触发BFC如何触发BFC

触发BFC方法：

  1. float属性为left/right
  2. overflow为hidden/scroll/auto
  3. position为absolute/fixed
  4. display为inline-block/table-cell/table-caption
CSS之margin塌陷
dachaoxuexi的博客
02-17 922
CSS中的外边距塌陷（Margin Collapse）问题是指在垂直方向上，当两个或多个块级元素的边距相遇时，它们之间的距离不是它们各自边距的总和，而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。.ac和.bc有上下margin但是只生效了一个最大值。
css中常见margin塌陷问题之解决办法
codingWeb的博客
09-21 385
当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 ①垂直并列 首先设置两个DIV,并为其制定宽高 <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> /*CSS部分*/ <style>...
css-基本问题
naozheyun2998的博客
03-27 893
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
css之margin塌陷
蔡里都傻的博客
07-22 688
实际上导致了整个.parent元素向下移动了20px，使得.parent的顶部与页面顶部之间的间距增加了20px，而不是.child元素内部增加了20px的间距。.child元素的margin-top现在正确地在其内部产生了20px的间距，而.parent元素的顶部没有移动。预期效果：如果margin塌陷没有发生，你可能会期望粉色的.child元素在其顶部有20px的空白区域（即margin），这个空白区域只影响.child元素，.parent元素的顶部不会移动。
【CSS问题】margin塌陷
最新发布
m0_64455070的博客
11-15 1633
CSS中的margin塌陷是一个常见的布局问题，主要发生在垂直方向上，当两个或多个元素的垂直margin相遇时，它们不会按照预期叠加，而是会发生重叠，导致最终的外边距值比单独设置时小。
margin-top塌陷问题的现象与解决的具体方法
09-22
在CSS布局中，`margin-top`塌陷是一种常见的问题，它发生在当一个块级元素（子元素）的顶部外边距与其包含块（父元素）相遇时，导致父元素的上边界不是按照预期与子元素的上边界保持一定距离，而是被拉下了一段距离...
CSS-高度塌陷布局乱问题详解
主营前端方向，技术栈是vue
11-15 1143
高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 1125
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
为了解决上述问题，可以通过调整元素的定位属性来改变其参考原点，或者采取其他措施来解决margin塌陷问题。除了本文提及的解决方案之外，还有其他一些方法可以尝试，如调整元素的z-index属性使其高于其他元素，或者...
CSS中的margin塌陷问题
m0_62711871的博客
04-15 2464
在web学习中我们可能会遇到一个问题：margin塌陷问题。 margin塌陷现象有两种：兄弟关系的盒子和父子关系的盒子。 1.兄弟关系盒子：垂直布局的块级元素，上下的margin会合并，取最大的一个margin作为两者间的距离。 解决方法：只给其中一个盒子设置margin值。 2.父子关系盒子：相互嵌套的块级元素，子元素的margin-top会作用在父元素上，使父元素和子元素一起向下移。 例如： <style> *{ margin: 0;
CSS的margin塌陷
zp1996323的博客
11-25 747
今天在某论坛看到一个题目，觉得很有意思，下面我们就来看问题：<div class="box1"></div> <div class="box2"></div> <div class="box3"></div>.box1, .box2, .box3 { width: 200px; height:40px; } .box1, .box3{ margin: 20px; }.box2
html+css margin塌陷
qq_39396275的博客
07-24 356
在设置子类和父类之间的margin-top时，会出现无反应的现象。 如下面代码： html： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;stylesheet&am
CSS之margin塌陷问题
zqr4818的博客
06-10 387
CSS之margin塌陷问题
css中 margin塌陷的问题
任重道远
08-11 606
现象：如下代码 &lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt; &lt;/div&gt; .wrapper{ width: 200px; height: 200px; background: #aaa; margin-left:200px ; margin-top:200px ; } .c...
CSS 中 margin 塌陷解决方案
YBZ_优快云的博客
08-06 306
1、垂直方向的margin，父、子元素是绑定在一起的，取最大那个值。 2、bfc（block format context）解决塌陷改变一丁点盒子的语法规则。 如何触发一个盒子的bfc？主要有四种形式： A、position: absolute B、 display: inline-block C、float: left/ right D、overflow: hidden 分别给父级设定四个样式中的一个就可以触发bfc 3、margin塌陷是一个解决不了的bug，智能说通过bfc绕过这个问题。
关于css的margin塌陷现象
时清云的博客
03-10 2443
由于偶然翻到了以前的笔记，记载的正好是css的margin塌陷现象。于是有了写在知乎上与大家分享讨论的想法。 在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。 margin的塌陷现象分两种情况：1，兄弟关系的
CSS3——垂直定位的小bug（margin塌陷）
abraham的博客
11-16 8747
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; width: 0; } .demo1{ /* margin-left: 100px;
css margin篇 margin塌陷
weixin_41213328的博客
05-08 214
1、嵌套元素里 垂直方向的margin属性 父子元素一起取最大的值 例如：margin-top margin-bottom 这种效果就是margin塌陷 利用bfc 就把这个盒子遵循另一套渲染规则，对于解决margin塌陷特别好用 1、如何触发bfc 触发bfc的集中规则，在父元素中添加以下任意一种都可以（哪个合适用哪个） position:absolute dispaly:inline-block float:left/right overflow:hidden 改变该父元素的渲染规则 2、兄弟元素之间
CSS面试题之margin塌陷问题
weixin_64534765的博客
05-16 440
首先说一下什么是margin塌陷问题，就是我们子元素设置margin，其父盒子被设置成类似margin-top的效果。我们想让inner1距离父容器各自10px，那么直接给inner设置margin:10px即可。但是最终效果并不是这样子，父元素被顶了10px的高度，这就是元素margin塌陷问题。● 父元素设置overflow:hidden（触发BFC）第一种方式设置overflow:hidden。● 父元素设置padding。● 父元素设置border。第三种方式设置border。
理解CSS margin塌陷与创建彩虹效果
"这篇文章主要介绍了如何使用CSS技术创建梦幻般的彩虹效果，同时涉及到了CSS中的margin塌陷问题及其解决方法。通过示例代码演示了两种不同的实现方式，一种是利用margin塌陷创建直角彩虹效果，另一种是通过伪元素和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

oah1021

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

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

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

打赏作者

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

抵扣说明：

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

余额充值