html+css之margin使用方式

//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的外部