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