HTML中margin外边距的基本知识点

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传递问题发生