块级元素及内联元素对margin、padding的态度

1、块级元素

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

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

　　padding演示：

　　原样

html：
 <div>块级元素</div>

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