编程之路
我们就这图来讲的话还是比较易于理解的，首先我们明确一下这是两个层，黑边框的层和蓝色边框的层。并且我们可以看到这张图已被分成五个区块首先我们明确一下他们的称呼1号区块（黑框和蓝框）属于这两个层的边框CSS中称之为border，2号区块就是黑框和蓝框中间的距离这块相对于蓝框层来说就是外边距我们在CSS中称之为margin，4号区域代表的是蓝框层的内容区域即content ，3号区域表示的是边框到内容的区域即层的内边距padding。首先知道了名称我们就能来讲解下一步了。
一、border属性。
border包含本身的话是总共5种形式即：左边框border-left一般单独设置左边框样式使用，上边框border-top一般单独设置上边框样式使用，右边框border-right一般单独设置右边框样式使用，以及下边框（底边框）border-bottom一般单独设置下边框样式使用,也可将下边框样式作为css下划线效果应用，以及border本身，设置四条一样的边框。
border的常见属性border-width规定边框的宽度（或者说高度）。属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。常见的一般用ｐｘ或者百分比固定的宽度，但是有时也会用到三种不精确宽度值thin（细的边框）、medium（中等的边框）、thick（粗的边框）border-width常见的主流浏览器（ｐｃ端）都是支持的。
border的常见属性border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。主要有一下值none（定义无边框）、hidden（外在表现和none属性一样，但是用在表格里边可以用来解决边框冲突问题，并且具有最高优先级）、dotted（定义点状边框，点的半径等于一半的边框宽度。在大多数浏览器中呈现为实线）、dashed（定义虚线在大多数浏览器中呈现为实线。）、solid（定义实线）、double（定义双线，双线的宽度等于 border-width 的值）、groove（定义 3D 凹槽边框，其效果取决于 border-color 的值）、ridge（定义 3D 凸起边框，其效果取决于 border-color 的值。）、inset（定义 3D inset 边框，其效果取决于 border-color 应用于表格单元格边框折叠套折叠时，此值像groove）、outset（定义 3D outset 边框。其效果取决于 border-color 的值应用于表格单元格边框折叠套折叠时，此值像槽ridge）。
border的常见属性border－color用于设置边框的颜色。所有浏览器都支持 border-color 属性但IE6（以及更早的版本）不支持属性值 “transparent”。主要的属性有以下几个：color_name（规定颜色值为颜色名称的边框颜色（比如 red）。）hex_number（规定颜色值为十六进制值的边框颜色（比如 #ff0000）。）rgb_number（规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。）transparent（默认值，边框颜色为透明。）
二、padding属性
padding包含本身的话是总共5种形式即：左内边距padding-left、上内边距padding-top、右内边距padding-right、以及下内边距padding-bottom行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
常见属性有：auto（浏览器计算内边距）length（规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px）%（规定基于父元素的宽度的百分比的内边距。）
三、margin属性
margin包含本身的话是总共5种形式即：左外边距margin-left、上外边距margin-top、右外边距margin-right、以及下外边距margin-bottom块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
常见属性有：auto（浏览器计算外边距）length（规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。）%（规定基于父元素的宽度的百分比的外边距。）
