CSS的Padding, Margin, Border 的区别

HTML的元素

HTML语言定义了一系列的标签元素，　比如div, hr , ul , a 等等。粗略来分， 有以下几种类型：

1. 块状元素： 以块的形式显示一个矩形区域， 可以定义自己的高度和宽度， 可以作为容器包含其他的块状元素和内联元素。
   比如： div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption
2. 内联元素（也称行内元素）：在一行逐个进行显示， 不能定义高度和宽度。
   比如： a,strong,b,i,em,span,label,img,input
3. 内联块元素：具备内联元素和块状元素的特点， 比如 img,input,textarea

什么是盒子模型(Box Model)

块状元素可以想象成一个正方形的区块， 这个区块在页面展现时，势必存在一些和其他区块之间的间隔问题， W3C 组织定义的把网页的对象放在一个盒子（box）中， 也就是常说的盒子模型（Box Model）。
盒子模型定义了四个区域：

1. content 内容
2. padding 内边距 , 边框到层的内容之间的空白
3. border 边框
4. margin 外边距 ：边框以外留的空白
   内容就是中间正方形的部分， 围绕该正方形的边框和边距有上下左右四个方向， 如下图所示：