1、块级元素

　　　　margin:跟标准一样，设置该块级元素边框与同级兄弟元素或者父元素的距离，俗称外边距。

　　　　padding：先延伸边框（也就是优先改变元素尺寸而不动元素中内容的位置），当边框碰到父元素的边界时，才向相反方向延伸，这时会改变该元素中内容的位置

　　padding演示：

　　原样

html： 
     
      块级元素
     
css:div{  width:100px;   border:1px solid #000;}

　　

　　添加padding后：

div{  width:100px;  border:1px solid #000;     padding-top:10px;/*向上扩展内边距，触顶往下延伸，元素内容下移*/  padding-bottom:40px/*向下扩展内边距，未触及边界，所以元素内容位置不变*/  }

2、内联元素

　　margin：无效（上）、有效（右）、无效（下）、有效（左）

          原样：

html:

<a class='testId'>

内联元素

</a>

<a class='t2'>

内联元素

</a>

<div>块级元素</div>

 

css:

.testId{

border:1px solid #000;

}

.t2{

border:1px solid red;

}

div{

width:100px;height:50px;

border:1px solid blue;

}

　　  

　　　设置margin后：

.testId{  border:1px solid #000;     margin:50px 5px 20px 30px;/*外边距设置*/}.t2{  border:1px solid red;}div{  width:100px;height:50px;  border:1px solid blue;}

　　

　　　　padding：一味延伸边框，触碰父元素或子元素边界时继续延伸边框不会移动元素内容位置（上下）。延伸边框，触碰父元素或子元素边界时会往相反方向移动，改变内容位置，效果和块级元素一样（左右）。