css样式之margin的使用
1.行内元素之间的水平margin的计算:
行内元素水平元素之间的margin是左右两个margin值的叠加,所以两个span之间的距离是30px
<span style="margin-right: 20px;">span1</span>
<span style="margin-left: 10px;">span2</span>
2.块级元素之间的垂直margin的计算:
块级元素的垂直margin的计算是大的margin值覆盖包含小的margin值,所以两个div之间的距离是30px,改变div1的值为20或者30,距离不变,改为40时,距离变为40px
<div style="margin-bottom: 10px;">div1</div>
<div style="margin-top: 30px;">div2</div>
3.嵌套盒子div之间的margin的计算:
子级margin-top为30 + 父级的padding10px,即40px,而其他三边的margin值均为10px.
<div style="padding: 10px; background-color: #00FFFF;">
<div style="margin-top: 30px;background-color: #F08080;"></div>
</div>
4.当margin值为负值时计算:
(1)当margin为负值时,元素会向反方向移动,比如span的margin-top为-100px时,span会向上移动100px
(2)当margin为负值时,子级元素本应该在父级元素内部,此时,可能会溢出到父级div的外部
原文链接：https://blog.csdn.net/m0_37246536/article/details/78631268
