html+css之margin使用方式

//css样式之margin的使用
//1.行内元素之间的水平margin的计算:   行内元素水平元素之间的margin是左右两个margin值的叠加,所以两个span之间的距离是30px                         
    span1
    span2
    
 //2.块级元素之间的垂直margin的计算: 块级元素的垂直margin的计算是大的margin值覆盖包含小的margin值,所以两个div之间的距离是30px,改变div1的值为20或者30,距离不变,改为40时,距离变为40px
   
div1

   
div2

 //3.嵌套盒子div之间的margin的计算:子级margin-top为30 + 父级的padding10px,即40px,而其他三边的margin值均为10px.
 

 

 

//4.当margin值为负值时计算:
(1)当margin为负值时,元素会向反方向移动,比如span的margin-top为-100px时,span会向上移动100px
(2)当margin为负值时,子级元素本应该在父级元素内部,此时,可能会溢出到父级div的外部

你可能感兴趣的:(html+css)