处理元素margin叠加（合并）的解决方法

已于 2023-12-21 22:44:54 修改
阅读量1.1k 收藏 1
点赞数 3
分类专栏： 前端知识库 文章标签： 前端 css css3
于 2022-01-28 10:53:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leoxingc/article/details/122727921
版权

处理margin叠加的解决方案

方法1:：利用flex布局对子元素的影响解决

  • 子元素的float、clear和vertical-align属性将会失效；
  • 解决了margin传递、重叠（叠加）问题；

方法2：利用外层padding值代替内部元素的margin；

方法3：绝对定位postion:absolute；

方法4：给父元素加边框 border（可以加个透明的边框）

方法5：给父级或者子级设置float

旺旺大力包
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
关于margin重叠的一些理解
lianglizhongblog
03-17 5888
当用margin进行页面布局时，有时会出现margin-top/margin-bottom没有效果的情况或者说没有按照我们“原以为”的效果，在查找BUG时，我们往往却没有意识或者了解到这其实是因为margin出现了重叠的原因： 一、相邻元素margin重叠： 效果： 如果按照我们的原来的“设想”，两个段落之间的距离应该是2em，但是效果却显示的是1em，这是因为第一段的mar
如何解决外边距margin叠加的问题探讨
09-22
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠，那么如何使元素上下margin不折叠呢？下面的方法或许对大家有所帮助
如何处理margin中的合并和叠加现象
cautionHua的博客
03-05 690
什么是margin合并？ 在实际的网页开发中，我们经常会遇到一些不符合预期的情况，就比如两个div之间设置的margin会进行合并和叠加的现象，我们应该如何处理和防止这样的情况发生。 兄弟关系中的margin合并和叠加 两个上下div的margin中会进行一个合并，只显示最大的margin值，如下图 另外需要提一嘴的是，两个兄弟关系中的左右div元素设置margin，还会发生左右的margin叠加现象 父子关系中的margin合并 在嵌套关系中的两个块级元素中，只要给子元素中设置一个margin-top
div标签中的元素margin-top失效的解决方法
12-14
如题。 问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成 overflow:hidden; 问题就解决了。
ie下margin不居中的三种解决方法
01-19
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 如下代码: 复制代码代码如下:<style type=”text/css”>#con{width:980px;martin:0 auto;}</style><div id=”con”>margin: 0 auto 内容居中显示</div> 解决方法一可以是对网页主体<body>声明文本居中，即body{text-align:center}即: 复制代码代码如下:<style type=”text/css”>body
解决margin 外边距合并问题
12-14
一、兄弟元素的外边距合并 效果图如下：（二者之间的间距为100px，不是150px） 二、嵌套元素的外边距合并 对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框，则父元素的上边距会与子元素的上外边距发生合并，且值为最大的那个上外边距，同时该值作为父元素的上外边距。即使父元素的上外边距为0，也会发生合并。(只有垂直方向才会发生塌陷） 解决方法： 　　1. 为父元素定义1像素的上边框。 　　2. 为父元素定义1像素的上内边距。 　　3. 为父元素添加overflow:hidden; 　　注意，第一种和第二种方法都不好，会撑大盒子的体积。第三种方法将溢出内
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 9252
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
margin重叠问题及解决方案全览
比起未来可期，我更喜欢如约而至
02-05 3546
项目中遇到了margin重叠问题，基于之前对这块知识掌握不熟练，所以学习之后在这里做一个总结吧。
关于margin上下重叠的问题
热门推荐
icesschen的博客
09-05 1万+
有两种情况：1、兄弟级的块之间，margin这个属性上下边距，经常会发生重叠的情况，以数值大的为准，而不会相加。 2、父子级的块之间，子级的上下margin会与父级上下margin重叠，以数值大的为准，而不会相加。 如何解决？第一种情况：1、float浮动或者 2、inline-block第二种情况：父级加1、overflow:hidden或者 2、加padding 或者3、加border 或者子
CSS 外边距(margin)重叠及防止方法
前端岚枫
12-08 3524
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
CSS外边距合并（塌陷）和解决方法
weixin_72322475的博客
07-11 1622
总结并举例论证了外边距合并（塌陷）的相关情况和解决方法
CSS中margin边界叠加问题及解决方案
01-19
CSS的margin边界叠加深度剖析 边界叠加简介 边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图： ◆元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，见图： ◆元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有
margin上下重叠问题
michael8512的博客
09-06 949
边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。  1）元素的顶边界与前面元素的底边界发生叠加当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：2）元素的顶边界与父元素的顶边界发生叠加当一个元素包含在另一个元素中...
什么是margin重叠问题？如何解决？
最新发布
Miller777_的博客
03-08 475
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。这种脱离文档流的元素的外边距不会折叠。
margin塌陷和margin重合问题的解决方法总结
Celester_best的博客
10-22 1913
margin塌陷和margin重合问题的解决方法总结
CSS 外边距重叠问题及解决办法
Fishmoving的博客
08-28 1362
CSS 外边距重叠问题及解决办法
css中的margin重叠（合并）问题
weixin_52036339的博客
09-10 543
margin重叠问题及解决方案
CSS: margin—相邻块元素垂直外边距的合并、嵌套块元素垂直外边距的塌陷
weixin_43932309的博客
12-09 1095
相邻块元素垂直外边距的合并现象两种解法； 嵌套块元素垂直外边距的塌陷现象四种解法
上下margin重叠的问题 看我这篇就懂了
weixin_53278262的博客
12-12 1249
打工人，打工魂，打工都是人上人 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 很多前端小伙伴在学习或者工作过程中会碰到上下盒子外边距重叠的问题，之前小编碰到这类问题也是琢磨了好久没弄出来----------这波大意了，没有闪，今天让小编给大伙避避坑，我先讲讲在规范文档中，2个或2个以上的块级盒模型相邻的垂直margin重叠的计算方法吧 1.全部都为正值，取最大者； 2.不全是正值，则都取绝对值，然后用正值减去最大值； 3.
5.flex中元素的margin是否会合并
04-27
flex中元素的margin可能会合并，也可能不会。具体是否发生合并取决于元素的父元素是否为flex容器，以及元素之间的关系。 如果元素的父元素不是flex容器，则元素的margin不会合并，不受标准的margin合并规则限制。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

旺旺大力包

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

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

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

打赏作者

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

抵扣说明：

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

余额充值