js margin作用到父元素_子元素margin-top导致父元素移动的问题__Vue.js

问题描述

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

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

问题分析

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

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值，这种行为称为边距折叠。

注意：只有上下边距会产生折叠，左右边距不会产生折叠。

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

1、同一层相邻元素之间

元素A

元素B

.A,

.B {

width: 50px;

height: 50px;

}

.A {

background: yellow;

margin-bottom: 10px;

}

.B {

background: pink;

margin-top: 20px;

}

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

解决办法：