外边距折叠现象--合并、塌陷问题

最新推荐文章于 2024-05-28 12:36:33 发布
最新推荐文章于 2024-05-28 12:36:33 发布
阅读量106 收藏 1
点赞数
文章标签： css 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54262933/article/details/129212830
版权

场景

  • 塌陷：块级元素嵌套时，子盒子的margin-top作用在父盒子，导致父元素一起往下移动

  • 合并：垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值，避免即可，给其中一个元素设置margin

解决塌陷

  1. 给父盒子添加边框border（不一定所有的盒子都需要边框，不推荐）

  1. 不设置子盒子的外边距，改设成父盒子的上内边距padding-top（会改变盒子原始的高，还要减去相应的高）

  1. 转换为行内块元素

  1. 添加浮动脱离标准流

  1. 给父盒子设置overflow：hidden；

  1. 给父元素或子元素定位，脱离标准流，只能用绝对定位和固定定位

  1. 给父盒子增加flex或inline-flex

hh！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
外边距及外边距合并与塌陷问题
qq_52594180的博客
02-24 364
1.若两个嵌套的的块元素（父子关系）均有margin-top值时，父元素会塌陷较大的top值（塌陷指父元素顶部与上沿的距离），而子元素并不会与父元素顶部产生距离（子元素的margin-top失效） 2.产生原因：首先，父子元素之间没有padding和border进行隔离，子元素会与父元素边缘重叠。其次，父元素和子元素都设置了同方向的margin-top值，而两个属性之间也没有其他内容进行隔离，导致两个属性相遇，使得margin属性重叠，从而发生父元素塌陷。 3.解决塌陷问题方法：
CSS基础知识(二）——盒子模型
weixin_54799350的博客
06-21 5282
CSS盒子模型相关属性介绍
CSS令人头疼的盒子模型
BBBBobo的博客
10-19 83
盒子模型 首先来个最经典的图,估计有所了解的人都看过这个图吧 hhhh 百度一般都是第一个 或者你点F12也能看到 如果不够清晰... 经典Hello World 首先是四个基本内容: 内容区域：content 利用 width 和 height 属性默认设置是盒子 内容区域 的大小 边框区域：border ...
外边距折叠现象--塌陷现象
weixin_43368552的博客
05-05 78
场景：相互嵌套的 块级元素，子元素的margin-top会作用在父元素上。 结果：导致父元素一起往下移动。 解决方法： 1.给父元素设置border-top或者padding-top（分隔父元素的margin-top） 2.给父元素设置overflow-hidden 3.转为行内块元素 4.设置float 伪元素：一般在页面的非主体内容可以使用伪元素 伪元素和真实元素的区别： 元素：html设置的标签 伪元素：由css模拟出的标签效果 种类： ：：before ：：after 必须设置content属性才
CSS外边距折叠与高度塌陷问题
weixin_43339112的博客
05-30 365
一. CSS外边距折叠问题 在CSS垂直布局中，相邻方向的垂直外边距会发生重叠现象。 垂直外边距折叠问题分2种情况： 兄弟元素 在相邻兄弟元素的垂直外边距中，当发生重叠时，会取两者之间的较大值。 该现象可以避免两个元素间的距离过大，在实际开发中通常是有利的，无需处理。 eg: 元素A margin-bottom:100px; 相邻兄弟元素B marigin-top:200px; 则元素A与B间的外边距为200px。 *如果兄弟元素的垂直外边距一正一负，则取两者之和；如果均为负值，则取两者绝对值较大的值
外边距合并、外边距塌陷，如何形成，及解决方法
暴躁小猿的博客
10-30 138
水平布局的盒子，左右margin正常，两者距离为左右margin之和 1、外边距折叠现象-合并： 垂直布局的同级块级元素，上下margin会合并，两者距离为最大一方margin 解决方法： ①开发时，避免出现垂直布局的上下相邻块级元素之间同时出现margin-top、margin-bottom 2、外边距折叠现象-塌陷： 互相嵌套的块级元素，子元素的margin-top会作用在父元素之上会导致连带父元素一起往下移动 *解决方法
CSS外边距合并
橙小兔的博客
11-14 308
1、外边距合并 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。  相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）...
如何理解HTML外边距折叠,详解CSS外边距折叠引发的问题
weixin_42511517的博客
06-05 196
第一种：两个块级元素的上下边距折叠第二种：父元素和子元素(或者最后一个元素)的外边距第三种：空的块级元素的上下外边距折叠的根本原因：margin之间直接接触，没有阻隔折叠后外边距的计算：1.如果两个外边距都是正值，折叠后的外边距取较大的一个2.如果两个外边距一正一负，折叠后的边距为边距之和3.如果两个外边距都为负数，折叠后边距为较小的边距解决方案：解决方法实际上也就是阻止外边距直接接触第一种、第三...
详解css外边距折叠（margin collapsing）
09-22
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下
详解CSS外边距折叠引发的问题
01-19
第一种：两个块级元素的上下边距折叠 第二种：父元素和子元素（或者最后一个元素）的...第一种、第三种：只有静态流的元素才会发生外边距合并故设置float position inline-block都可以 <style> .bother{ width:
外边距折叠1
08-08
垂直外边距的重叠，相邻的垂直外边距会发生重叠现象 --兄弟元素之间相邻垂直的外边距会取两者之间的较大值（俩者都是正值） 若一正一负，取俩者之和，若都是负值，取
vue2.0 可折叠列表 v-for循环展示的实例
10-18
今天小编大家分享一篇vue2.0 可折叠列表 v-for循环展示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
obsidian-foldmarker：标记标题默认为折叠
02-09
折叠标记在标题中添加<!-- fold -->以使其默认折叠。
外边距合并及塌陷
IT晓可程序员之路
06-25 533
外边距合并及塌陷问题整理解决办法
CSS中的外边距合并问题（外边距塌陷）
sinat_41660714的博客
11-11 574
margin margin指外边距，是盒子模型的组成之一（盒子=内容+边框+外边距+内边距），类似于表格中的cellspacing，具体用法如下： 一个值时，指定上右下左的外边距 两个值时，第一个值为上下外边距，第二个值为左右外边距 三个值时，第一个值为上外边距，第二个值为左右外边距，第三个值为下外边距 四个值时，分别对应上、右、下、左四个外边距 也可以单独设置，如margin-left，mar...
外边距margin合并问题：外边距塌陷
qq_51874993的博客
04-11 431
目录 前言 一、为什么存在外边距塌陷 二、解决外边距塌陷 1.给父级的盒子制定边框线，然后设置子级盒子的外边距 2.给父元素设置内边距 3.给父元素添加overflow：hidden； 总结 三、清除内外边距 前言 写的时候遇到了问题，虽然自己有学但实操似乎会忘记，就把外边距塌陷的问题记录下来了。 一、为什么存在外边距塌陷 当父盒子和子盒子同时有外边距margin设置的时候，网页显示的是两者比较大的离顶部较远的那个外边距，而子盒子并不会与父盒子产生外边距，这一现象称之为塌...
html盒模型中关于外边距塌陷问题（父子关系外边距和兄弟关系外边距）
lyclyc_的博客
06-25 1019
1，父子盒子外边距塌陷 父子关系外边距塌陷的表现是：父盒子和子盒子粘在一起了，当给父盒子设置margin-top时，子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时，父盒子也跟着走。当子盒子和父盒子都设置margin-top时，哪个值大，就按照哪个值。 塌陷原因：父子盒子公用一个外边距区域。 解决办法： 1，给父盒子设置边框或内边距 2，给父标签添加overflow:hidden属性，触发BFC规则（块级格式上下文，把父级渲染成一个独立区域。） 代码如下： <!DOCTYPE html
外边距合并和塌陷问题及解决方法
weixin_50939386的博客
03-19 941
1.外边距合并 ​ 当两个外边距相邻时，它们会合并为较大的那一个。 ​ 无论是相邻元素的上下边距，还是父子元素的上 边距，甚至是同一元素的上下边距。 ​ 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）， 它们的上和/或下外边距也会发生合并。 ​ ​ ​ 2. 当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 ​ 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距
CSS实现一个雨滴滑落效果
最新发布
云加速
05-28 382
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
element-plus折叠el-table
09-10
要实现element-plus中el-table的折叠功能，你可以按照以下步骤进行操作： 1. 首先，我们需要隐藏默认的展开图标。可以通过添加以下CSS代码来实现： ```css .el-table__expand-icon > .el-icon { display: none !...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值