margin :外边距可以改变盒子和盒子之间的距离,
在进行布局时,遵循以下原则, 从上往下 从左往右
设置margin-top会将盒子自身往下推
margin-bottom会将与其相邻同级元素向下推,一般我们在布局同级元素之间优先使用margin-top来按照从上往下的原则进行样式设置
设置margin-left会将盒子自身往右推
设置margin-right会将盒子同行排列的同级元素
向右推,一般我们在设置布局时优先使用margin-left
同级关系时,垂直方向上两个盒子之间的margin会重叠
水平方向上两个盒子之间的margin会叠加
嵌套结构中:子级通过margin来改变自己
相似父级中的位置中,margin-left指的是自己的左侧
外边框,到父级的内容区域左边之间的距离,其他方向的距离都是子级的边界到父级内容区域边界之间的距离
当父级没有明确的上边界时(border padding),那么该父级下的第一个子级,其margin-top就会传递给父级,导致父级带着子集一起向下移动,解决方案:为父级设置明确边界,border/padding
一般现在项目中,如果我们希望子级和父级之间有一定间隙,优先使用为父级设置padding来解决,防止margin-top传递问题发生