父子设置margin-top导致的坍塌现象，原因与解决方法

最新推荐文章于 2023-06-15 11:25:22 发布
最新推荐文章于 2023-06-15 11:25:22 发布
阅读量565 收藏 1
点赞数
分类专栏： CSS 前端知识总结 学习总结 文章标签： css小贴士
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42396868/article/details/85059277
版权

现象：
       当我们给父级盒子设置margin-top的时候，会出现一段冗余，当我们给子级设置margin-top的时候，会出现坍塌现象，渲染出来的页面会根据双方大的margin进行偏移，而且这偏移还是针对父级的，页面上的样子就是，不管你如何Margin-top子级元素始终位于父级的顶端。

解决方法：
1.给父级设置overflow:hidden;
2.给父级盒子设置背景色边框：border:1px solid transparent;
3.给父级设置浮动float或者定位absolute

feng5 9q
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
巧妙运用v-model实现父子组件传值的方法示例
10-17
主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决margin塌陷与margin合并（margin）清除浮动问题
12-10
给子级设置margin-top时，他不会相对父级一起动，只有他的margin超过父级的margin时，才会生效，但会带着父级一起动（作者总结，官方定义自己查看）。如： <!DOCTYPE html> <html lang="en"> <head>...
【父子元素加margin-top值塌陷问题解决方案以及清除浮动方法】
Rich26的博客
07-21 391
父子元素加margin-top值塌陷问题解决方案 1、给父元素加padding值 2、给父元素设置overflow:hidden; 3、把父元素从块元素转换为行内块（不推荐，会改变页面布局） 4、设置浮动（不推荐） 5、设置绝对定位 position: absolute;（不推荐） 6、给父元素添加边框属性 清除浮动方法 1、直接设置父盒子高度 2、额外标签法 给父元素内容的最后添加一个块级元素（不推荐） 3、单伪元素清除法 (不推荐）) 4、双伪元素清除法（推荐） 5、给父...
解决margin-top塌陷问题的六种方法
道阻且长，行则将至。
07-13 2048
解决margin-top塌陷问题的六种方法 什么是margin-top塌陷？ margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。 怎么解决margin-top塌陷？ 对于margin-top的塌陷问题，可以从以下几点去解决，亲测有效： 1.给父元素增加边框 为了不影响原先的图
CSS--解决margin塌陷(margin-top失效)--实例
IT利刃出鞘的博客
12-03 4194
当2个垂直外边距相遇时，他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。 下述场景会导致margin合并： 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。
解决父子外边距塌陷（子元素margin-top不生效）的三种方法
qq_48109675的博客
08-26 621
第一种：父元素设置padding 第二种：父级设置边框 第三种：父元素设置overflow: hidden;
为什么第一个子元素设置margin-top父元素会跟着移动（Margin高度塌陷问题）
qq_51066068的博客
04-01 2059
问题： 有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。 这种情况成为margin塌陷：父子元素的margin-top属性，会共用值最大的那个。所以父元素公用了子元素的margin-top值，自然也就跟着移动了 效果图： 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.
有关弥补margin-top坍塌问题
J_1117的博客
10-02 107
很多刚刚学会静态页面布局的同学会遇到margin-top坍塌的问题，这个问题只能弥补，不能解决； 例如： 以下是分别给两个层级div加上左外边距（margin-left），发现父元素的div根据body位置移动，子元素是根据父元素位置移动； html片段 <body> <div class="wrapper"> <div class="content"&g...
margin坍塌现象的解决方法
三羊的博客
12-17 233
父子margin坍塌现象的解决方法: 1.给父元素定义一个padding-top 2.给父元素定义overflow(hidden,auto,scroll) 3.给父元素定义一个border-top 4.给父元素定义float(除none以外的所有值) 5.给父元素定义position(absolute,fixed) 6.给父元素定义display(inline-blocks,table-cells...
经典bug------margin塌陷和margin合并(解决方法BFC)
x1037490413的博客
09-09 550
哈哈哈
CSS查缺补漏之《如何优雅解决margin垂直方向塌陷与合并问题？》
一只努力搬砖的打工妹纸
06-15 1397
解释margin垂直方向上塌陷与合并现象，并提出简单易行的解决方案~
Vue中父子组件的值传递与方法传递
10-14
以下将详细讲解Vue中父子组件的值传递和方法传递。 一、Vue中父组件向子组件传值 在Vue中，父组件向子组件传递值通常使用`props`特性。父组件通过`v-bind`指令（简写为`:`)将数据绑定到子组件的属性上。在示例代码...
vue非父子组件通信问题及解决方法
08-27
vue非父子组件通信问题及解决方法 在 Vue 中，非父子组件之间的通信是一件棘手的事情。通常情况下，我们可以使用 props 传递数据从父组件到子组件，但是这种方法无法应用于非父子组件之间的通信。在本文中，我们将...
使用JS来控制与创建DOM元素，获取DOM中的类名并赋值
weixin_42396868的博客
12-18 3923
学习
addEventListener的一些细节描述
weixin_42396868的博客
10-03 1294
关于addEventListener的一些使用，经过下午对于一个按钮开关写监听的痛苦经历，决定写一篇addEventListener来填补自己的空虚。 addEventListener的参数有三个，第一个是事件，例如‘click’，‘touchstart’，去掉on，加上on的事件，一般直接加在元素的后面，例如 demo.onmouseenter=function(e){console.log(e...
关于盒子与定位的一些小知识总结
weixin_42396868的博客
09-18 619
CSS+Div的一些小知识，学习加实践后总结： 1.要想实现内容自适应页面大小的则让需要的元素的宽高设置百分比或者auto。 2.若想要实现内容不随着页面的变化而变化（页面变化有时会影响内容标签的布局）， 可以使用盒子嵌套法 （在需要固定不变的标签外部嵌套一个固定宽的盒子即div，来保证布局， 当你设置了一个盒子固定大小时，及时你缩小了页面，也仅仅只是让外面的盒子进行了offset位置，但是里面的...
css常见问题总结：1.图片一起放时的间距2.浮动后的脱离文档流3.内联与块状的区别 4.替换元素与非替换元素
weixin_42396868的博客
12-18 220
双Img的字符间距问题： 当两个或以上img放在一起时会出现字符间距问题，是因为两张img换行时的空白字节，浏览器无法识别。 解决方法： 1.把两个img标签写在同一行 2.在两个img外套一个父级元素，把父级元素的font-size设置为0（没有大小） 3.把img图片的display设置为block（块级元素），然后还需要偏移（当然偏移完需要清除浮动） 4.在两个img外套个父级元素，把父级...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
掌握高级前端面试：深入理解CSS盒子模型与margin-border-padding-content
- 兄弟元素间的相邻外边距同样遵循这些计算规则，父子元素的外边距交互则可能有所不同。 掌握这些知识点对高级前端开发工程师来说至关重要，它们不仅影响到页面的外观和可维护性，也直接影响到性能优化和用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值