子元素设置margintop影响父元素,子元素margin影响父元素

问题描述

　　今天在修改页面样式的时候，遇到了子元素中margin-top的设置，但是并没有造成子元素和父元素之间的间隙，而是作用于其父元素，导致父元素中出现了margin-top的效果。

　　今天我们就来说说整个问题的成因和解决方法。

问题分析

　　 MDN上有这样一段话：

　　块的上边距和下边距有时会合并(折叠)成一个单个边距，其大小为单个边距的最大值。这种行为被称为边距折叠。注意：只折叠上下页边空白，不折叠左右页边空白。

　　有三种情况会导致页边距折叠：

1、同一层相邻元素之间

　　 div class=A 元素A/divdiv class=B 元素B/divstyle。一个，b {宽度：50px高度：50px}.A {背景：黄色；边距-底部：10px}.B {背景：粉色；边距-顶部：20px}/style上面两个p标签的间隔是20px。

　　解决方案：

　　第二个元素B，设置为清除浮动clearfix。clearfix:在{ content:“”之后；显示：块；明确：两者都有；高度：0；溢出：隐藏；可见性：隐藏；}.clear fix { zoom:1；}:在

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

　　的例子中，当元素A和B与父元素框之间没有其他元素时：

　　div class= box div class= A= A element A/div div class= B element B/div/div class= next next/div style . box { margin-top:10px；边距-底部：10px背景：# eee}.一个，B {宽度：50px高度：50px}.A {背景：黄色；边距-顶部：20px}.B {背景：粉色；边距-底部：20px}.下一个{高度：50px背景：# eee}/样式

　　解决方案：

　　父元素创建块级格式上下文(溢出：隐藏)，父元素设置上下边框(边框：1px实心透明)，父元素设置上下填充(填充：1px 0)，子元素按浮动float或定位位置排列。注意：即使父元素的外边缘设置为0，margin: 0，第一个或最后一个子元素的外边缘仍然会“溢出”到父元素的外部。

3、空的块级元素

　　当元素B的页边距-顶部直接粘贴到元素A的页边距-底部时(也就是中间的元素没有内容)，也会发生边界折叠。

　　div class= top top/div div class= middle /div div class= bottom bottom/div style . top，底部{宽度：50px高度：50px背景：粉色；}.中间{ margin-top:10px；边距-底部：20px}/样式

　　解决方法：

　　中间元素清除浮动：clearfix中间元素创建块级格式上下文：溢出：隐藏中间元素设置为内联块元素：显示：内联块；中间元素设置高度：height:1px；中间元素设置最小高度：min-height:1px；中间元素设置边框：border-top: 1px纯色透明；中间元素设置填充：padding-top:1px；需要注意的事项

　　如果参与折叠的边距包含负值，则折叠后边距的值为最大的正边距和最小的负边距之和(即绝对值最大的负边距)；也就是说，如果-10px，-10px，10px，30px叠加在一起，边距范围是30px-10px=20px。如果折叠涉及的所有外部边距都是负数，则折叠的外部边距的值是最小的负边距的值。此规则适用于相邻元素和嵌套元素。请参见链接https://developer.mozilla.org/zh-cn/docs/web/CSS/CSS _盒子_模型/母盘制作_边距_折叠。

　　这就是本文关于子元素margin-top导致父元素移动问题的解决方案。更多相关的子元素margin-top导致父元素移动。请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。