外边距塌陷（父子嵌套塌陷兄弟上下塌陷）

最新推荐文章于 2023-07-25 17:24:47 发布
最新推荐文章于 2023-07-25 17:24:47 发布
阅读量364 收藏 1
点赞数 2
分类专栏： html5 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52583582/article/details/109826338
版权

浏览器默认问题，只发生块类型元素的上下外边距
overflow:hidden;
创造一个密闭私有空间触发BFC规则。

父子嵌套塌陷

兄弟上下塌陷

在这里插入图片描述

哎呦灬不错呦。
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS外边距塌陷问题分析及解决方法
"✧treasure mountain✧"
03-07 9720
概念： 外边距塌陷也称为外边距合并 是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距 组合在一起变成单个外边距 不过只有上下外边距才会有塌陷 左右外边距不会出现这种问题 对于两个嵌套关系的块元素 如果父元素没有上内边距（padding）或边框（border） 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者 因此可以整理出—— 当外边距塌陷时外边距之间的计...
父元素外边距塌陷
m0_53881899的博客
12-10 133
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷
前端0-7
qianqian0707的博客
07-19 55
一定要离消耗自己的人或事远一点，一个人没有那么多的精力还有时间，去帮助别人解决一些你甚至自己都会看不起的事情，但往往这种事非常容易发生在你的身边。做一件事之前一定要想好这件事对自己有没有好处，对自己的未来是没有一点坏影响的，这是你去做这些事的前提，一将终成万古枯。人一定要远离消耗自己感情和精力的事，时间是有限的，但潜力是无限的，等你真正做成功之后，不光别人会觉得你真的很牛，连自己也会心生感慨，自己真的可以做到这件事。现象元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；...
解决父子外边距塌陷（子元素margin-top不生效）的三种方法
qq_48109675的博客
08-26 621
第一种：父元素设置padding 第二种：父级设置边框 第三种：父元素设置overflow: hidden;
父子嵌套块-margin外边距合并-测试
soraru的博客
06-08 129
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
CSS中如何解决外边距塌陷问题
11-20
首先我们先看出现外边距塌陷的三种情况： 1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。 <style> .box1 { ...
3dmax场景塌陷插件
03-02
而"3dmax场景塌陷插件"则是一个针对3ds Max设计的辅助工具，旨在帮助用户更高效地处理场景中的复杂物体。这款插件的核心功能是将场景中的多边形对象合并为一个单一的几何体，这个过程被称为“塌陷”或“合集”。 ...
浅谈CSS 高度塌陷问题
09-22
【CSS 高度塌陷问题详解】 在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了...
基于物联网的煤矿塌陷监测预警系统
01-12
针对煤矿塌陷带来的灾害，设计了基于物联网技术的煤矿塌陷监测预警系统。通过对煤矿塌陷环境的分析，设计监测预警系统的总体架构，利用Knothe函数构建塌陷预测模型，采用PHP开发语言，结合MySQL数据库设计了煤矿塌陷...
关于清除浮动塌陷的几种方法总结
09-27
浮动和浮动塌陷是CSS布局中的重要概念，尤其在传统布局模式中经常遇到。浮动的主要目的是让元素在页面上能够并排显示，比如创建多列布局。当一个元素设置了浮动（`float`属性，如`float:left`或`float:right`），它...
CSS之盒子的边距塌陷（兄弟、父子）与解决方案
Erya Programming learning
06-02 3949
一、边距塌陷 CSS 盒子模型中，如果给两个盒子同时设置外边距，那么它们距离可能并不是外边距之和，称为边距塌陷。 导致边距塌陷的原因是外边距，有以下四种情况： case1：如果都是正数，则取最大值， case 2：如果相同，则取其中之一 case 3：如果有正有负，则取最大的正数加上最小的负数之和 case4：如果都是负数，则取最小值。 1.相邻盒子之间 相邻的盒子之间的边距一般都会有塌陷的情况，比如一个盒子的下边距和下面盒子的上边距： 示例1： #block1 { margin-bottom:
兄弟元素，垂直方向上外边距重叠（塌陷）
Grueay的博客
07-28 305
记录，仅供参考 html <view class="parent"> <view class="child1"></view> <view class="child2"></view> </view> css .parent { width: 150px; border: solid; } .child1, .child2 { width: 150px; height: 150px;
外边距塌陷的解决方法
weixin_42206013的博客
11-01 286
1. 上下位置的兄弟元素 当两个兄弟元素有上下关系时，上面的元素的下内边距 ( margin-bottom )和下面的元素的上内边距 ( margin-top ) 不是简单相加的关系，而是两者之间去最大值； .father { width: 400px; border: 1px solid #000; } .box-1 { width: 200px; height: 200px; background-color: blue; margin-bottom: 6
高度塌陷
旺旺的博客
06-18 782
1.什么是高度塌陷 在文档流中 当父元素的高度不设置，让子元素的高度来撑开时。当子元素设置浮动以后，子元素脱离文档流，那么父元素将包不住子元素。那么父元素的高度就塌陷了，就会导致文档流中的父元素的兄弟元素，从后面顶上来。导致页面显示错误解决高度塌陷 方法1    bfc bfc 是每个属性的一个隐藏的样式。当开启了bfc有以下功能        1.父元素子元素的外边距不再重叠        2....
Web前端知识CSS（外间距塌陷问题、overflow详解、CSS背景、CSS显示模式）
m0_72686827的博客
08-03 613
本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为display:inline-block的元素称为行级块元素常见行内块元素：img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局。...
css margin篇 margin塌陷
weixin_41213328的博客
05-08 152
1、嵌套元素里 垂直方向的margin属性 父子元素一起取最大的值 例如：margin-top margin-bottom 这种效果就是margin塌陷 利用bfc 就把这个盒子遵循另一套渲染规则，对于解决margin塌陷特别好用 1、如何触发bfc 触发bfc的集中规则，在父元素中添加以下任意一种都可以（哪个合适用哪个） position:absolute dispaly:inline-block float:left/right overflow:hidden 改变该父元素的渲染规则 2、兄弟元素之间
css如何解决高度坍塌问题
javaee_chen123的博客
09-06 351
高度问题描述： 父元素没有指定高度，高度为它的由子元素高度 如果子元素浮动，那么父元素高度不再被子元素撑起，出现高度坍塌 高度坍塌： 解决： 在父元素的第一个子元素的位置，加一个空的块元素，并且设置clear:both，来清楚兄弟元素浮动后对他的影响。 这样原来子元素浮动后，也能撑起父元素高度。 代码： <!DOCTYPE html> <html lang=...
如何解决外边距塌陷
最新发布
zch2846的博客
07-25 324
解决外边距坍塌的方法
html盒模型中关于外边距塌陷问题（父子关系外边距和兄弟关系外边距）
lyclyc_的博客
06-25 1040
1，父子盒子外边距塌陷 父子关系外边距塌陷的表现是：父盒子和子盒子粘在一起了，当给父盒子设置margin-top时，子盒子跟着父盒子一块下移了。 给子盒子设置margin-top时，父盒子也跟着走。当子盒子和父盒子都设置margin-top时，哪个值大，就按照哪个值。 塌陷原因：父子盒子公用一个外边距区域。 解决办法： 1，给父盒子设置边框或内边距 2，给父标签添加overflow:hidden属性，触发BFC规则（块级格式上下文，把父级渲染成一个独立区域。） 代码如下： <!DOCTYPE html
解决CSS外边距塌陷问题的方法和解决原理
07-09
CSS边距塌陷问题是指在垂直方向上相邻的两个元素的外边距合并为一个较大的外边距的象。解决该问题的方法有以下几： 1. 使用padding替代margin：将元素的外边距改为内边距，这样就不会出现外边距塌陷的情况。 2. ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值