子元素margin-top导致父元素移动的问题

更新日期: 2021-01-29阅读: 1.5k标签: margin

问题描述

今天在修改页面样式的时候,遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个margin-top 的效果。

今天就来说说整个问题产生的原因,以及解决方案。


问题分析

在MDN上面有这么一段文字:

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值,这种行为称为边距折叠。
注意:只有上下边距会产生折叠,左右边距不会产生折叠。

有三种情况会产生边距折叠:

1、同一层相邻元素之间

Copy
<div class="A">元素A</div> <div class="B">元素B</div> <style> .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-bottom: 10px; } .B { background: pink; margin-top: 20px; } </style>

上面两个p标签之间的间隔是20px。


解决办法:

第二个元素B,设置清除浮动clearfix

Copy
.clearfix::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .clearfix { zoom: 1; }

2、父子元素之间没有内容

例子中,A,B元素与父元素box之间没有其他元素的情况下:

Copy
<div class="box"> <div class="A">元素A</div> <div class="B">元素B</div> </div> <div class="next">Next</div> <style> .box { margin-top: 10px; margin-bottom: 10px; background: #eee; } .A, .B { width: 50px; height: 50px; } .A { background: yellow; margin-top: 20px; } .B { background: pink; margin-bottom: 20px; } .next { height: 50px; background: #eee; } </style>


解决办法:

  • 父元素创建块级格式上下文(overflow:hidden)
  • 父元素设置上下border(border: 1px solid transparent)、
  • 父元素设置上下padding(padding: 1px 0)
  • 子元素采用浮动float或者定位position 的方式排列。
注意:即使设置父元素的外边距是0,margin: 0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。

3、空的块级元素

当元素B的margin-top直接贴到元素A的margin-bottom的时候(也就是中间的元素没有内容),也会发生边界折叠。

Copy
<div class="top">top</div> <div class="middle"></div> <div class="bottom">bottom</div> <style> .top,.bottom { width: 50px; height: 50px; background: pink; } .middle { margin-top: 10px; margin-bottom: 20px; } </style>


解决方法:

  • middle元素清除浮动: clearfix

  • middle元素创建块级格式上下文:overflow:hidden

  • middle元素设置为行内块元素: display: inline-block;

  • middle元素设置高度: height: 1px;

  • middle元素设置最小高度:min-height: 1px;

  • middle元素设置border:border-top: 1px solid transparent;

  • middle元素设置padding:padding-top: 1px;


注意事项

  • 如果参与折叠的margin中包含负值,折叠后的margin的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和;也就是说如果有-10px,10px,30px叠在一起,margin的范围就是 30px-10px=20px。
  • 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

    原文首发地址:https://github.com/Daotin/fe-blog/issues/

    链接: https://www.fly63.com/article/detial/10120

    相邻元素之间的margin合并问题

    外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

    css盒子_用Margin还是用Padding?

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。

    margin和padding的区别和用法

    marigin:就是外边距。padding:就是内边距。怎么就容易记住两者呢?马蓉大家都知道吧,给王宝强带帽子的那位,假如你认识了马蓉是不是想离他远点呢?而马蓉的拼音是marong,是不是和margin特别像呢?

    CSS margin的一些让你模糊的点

    当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。

    css设置margin-top失效及解决办法

    在web网站开发中,有时候我们给html元素设置的margin-top或margin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况:

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!