margin重叠之父子元素

最新推荐文章于 2023-08-09 12:26:33 发布
最新推荐文章于 2023-08-09 12:26:33 发布
阅读量712 收藏
点赞数
分类专栏： Java web 文章标签： html css margin重叠 div 父子元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liona_koukou/article/details/50668545
版权

margin重叠现象就是相邻的两个普通元素，上下边距不是普通的相加而是取其中较大的边距值（注意是普通元素）

同时，父子元素也会发生margin重叠现象，具体情况如下

1、两个div，父元素和子元素

2、分别定义其margin-top属性值，父元素为100px子元素为20px


3、结果如下，取了较大的父元素的margin-top值100px


辣姐什么鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
盒模型margin重叠/合并问题解决发方法
ifformy的博客
03-14 2143
html代码 <div class="divOne">场请放事国才没甲辜是受一颜我冇于人不，得评骂天对互秦变者苟你流太，此将游人的倒的动，付解有活后大但家考人动不把是家斯，足创者德已案的临孔什掉三活，重。</div> <div>已对报了拾妙人航即罚因最德而才实，病好仍血老仓锐娇国，你在以没身又为皇，么屯够生以母判，云败叩反能收能章王的杨人也，终书畴请土才话的，者作你郭放，君未张知之感则和饮是第</div> css 代码 /*初始化*/ bo..
margin上下重叠问题
michael8512的博客
09-06 971
边界叠加简介边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。  1）元素的顶边界与前面元素的底边界发生叠加当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：2）元素的顶边界与父元素的顶边界发生叠加当一个元素包含在另一个元素中...
同级元素和父子间元素margin重叠问题和解决方案
CaseyWei
09-17 2316
场景一：两个同级元素上边元素的margin-bottom和下边元素margin-top会产生重叠。 如下边html，id为one的div和id为two的div之间距离应该是50px，但真实效果是40px，因为margin重叠了，margin值取他们之间的最大值。 <html> <head> <style type="text/css"> ...
处理元素margin叠加（合并）的解决方法
leo的博客
01-28 1375
处理margin叠加的解决方案
父、子元素间，兄弟元素间 上下margin 重叠问题，及BFC探索
慢才后生
10-16 1074
父、子元素间，兄弟元素间 上下margin 重叠问题，及BFC探索
margin重叠问题的解决方案
SeekerTime
03-24 724
一、水平方向         水平方向不会发生多个div的margin重叠的现象，不做讨论。 二、垂直方向        1、同级关系margin重叠                解决方案：a、float：left | right ;                                  b、display:inline-block;        2、父子关系m
浅谈css margin重叠
12-13
父子元素margin重叠 解决办法： 给子元素添加浮动属性，相应父元素添加必要的清浮动属性； 给父元素添加边缘属性，如padding、border； 同级元素margin反向重叠 同级元素margin反向重叠时，元素之间的距离为两个...
父元素与子元素之间的margin-top问题(css hack)
09-25
在CSS布局中，当给子元素设置`margin-top`时，有时会发现父元素的顶部位置也受到了影响，出现所谓的“margin collapsing”现象。这个问题在前端开发中比较常见，尤其在设计复杂的页面布局时，如果不了解这个特性，...
css行内元素padding,margin,width,height没有变化
09-25
主要介绍了css行内元素设置padding,margin,width,height没有变化的解决方法，需要的朋友可以参考下
CSS 外边距(margin)重叠及防止方法
12-13
注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法...
margin重叠的原因及解决办法
cherry8179的博客
04-10 1977
一.原因及创建 1.margin重叠是因为同一个bfc（块级格式化上下文）中的margin会重叠，bfc是单独的一个容器。 2.创建bfc的方法： float的值不为none position的值为absolute，fixed display（inline-block，t...
css块级元素的外边距重叠问题
最新发布
2301_76430284的博客
08-09 274
外边距(margin)是指元素与元素之间的距离。属性：margin-top:设置元素上外边距margin-right:设置元素右外边距margin-bottom:设置元素下外边距margin-left:设置元素左外边距。
CSS margin 重叠(margin collapse)
broken_promise的博客
07-19 1747
首先有两个地方是我自己以前也没有注意的非替换元素的内联元素(,等),设置上下margin没有用.但是设置左右margin是有效果的.而替换元素(等),设置上下左右四个margin都有效果其次就是只有上下margin会发生重叠(这个说法不严谨,后面会解释).进入正题,上下margin重叠时,谁的值(绝对值)更大最终的margin大小就是谁的值.如果上下margin大小相同也是这样....
margin重合(外边距重叠)及解决方法
liuye066的专栏
05-25 9988
CSS 外边距重叠(外边距塌陷) 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。 一、哪些元素会发生外边距重叠问题 外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 二、什么情况下会发生外边距重叠呢 第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
margin重叠问题
weixin_43971228的博客
08-21 929
margin重叠 CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫重叠（collapse） ，产生的结合的margin叫做重叠margin。 margin重叠的计算规则 两个margin是相邻的，当且仅当： 都属于流内块级盒，处于同一个块格式化上下文。 没有行盒（line box），没有空隙，没有padding并且没有...
margin的上下重叠bug
m0_46387675的博客
03-02 411
margin的上下重叠bug 两个同辈元素上下排列，给上元素设置下margin，给下元素设置上margin，那么两个元素的距离取两个margin值中最大的那个值，又叫margin的重叠现象 父子元素，子元素的margin-top会错误的传递给父元素，子元素在父元素内看不到margin-top的设置 需要注意的是，margin重叠只发生在块状元素，且具有垂直相邻的关系才会发生重叠。margin...
元素之间设置margin的影响及原因
m0_45251556的博客
04-08 1224
在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下： 影响： 1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值 2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置 注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响 原因： BFC机制的规定： W3C中指出： 在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的
margin重叠问题及解决方案全览
比起未来可期，我更喜欢如约而至
02-05 3808
项目中遇到了margin重叠问题，基于之前对这块知识掌握不熟练，所以学习之后在这里做一个总结吧。
关于父级元素的margin和子级元素的margin重合的问题
qq_40291929的博客
12-13 2280
子元素和父元素的margin重合正确来说应该是叫margin共享  什么是margin共享？ 其实就是子元素的margin-top会传递给父元素。  具体来举个例子 &lt;style&gt; #f{ width:200px; height:200px; background-color: red; } #c{ ...
如何解决css两个块上下margin重叠
07-16
当两个相邻的块元素（block element）的上下 margin 相遇时，会发生 margin 重叠（collapsing margins）现象。这种情况下，两个块元素的 margin 可能会合并为一个较大的 margin 值。 要解决这个问题，您可以尝试...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

辣姐什么鬼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值