outline padding margin border

图示：

仔细看的话会注意到图上没有outline，因为outline现在只有很少的浏览器支持，所以被border。

border：border控制对象周围的边框。语法：border : border-width || border-style || border-color ，三者可以互换位置。border-width是宽度，border-color是颜色，border-style是样式。

样式有none（无）、hidden（隐藏）、solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（3D凹槽）、ridge（菱形边框）、inset（3D凹边）、outset（3D凸边）。我的文章列表分割线就用了虚线和双线。

例如想给一个对象加上一圈宽度为2像素的绿色边框，那么就写上如下语句：border:2px #0F0 solid。

再例如想给一个对象“上边”加一条1像素宽的白色虚线，那么：border-top:1px dashed #FFF忽略掉了。

padding：padding的作用就是在内容和边框之间补充空白，反过来说也可以让边框远离内容。

margin：作用是在边框外补充空白，多用于调整不同内容间的距离，例如模块和模块的上下距离（左右也可以，不过影响最大的不是margin而是别的因素）。语法参考padding。

在没有边框的时候，如果只是为了调整位置，padding和margin其实作用效果一样。但值得一提的是background所作用的区域是内容和padding区域，所以有背景图片或背景色的时候两者就不同了：调整padding背景的范围会变，而调整margin则不会。

当然，这些属性虽然非常有用，但并不是万能的。位置还会受图片、text-indent（缩进）、line-height（行高度）等影响。

       outline 能告诉用户那一个可以激发事件的html元素获取了焦点，对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。另一方面，outline 也有些讨厌的地方，比如使用CSS设计的Tab(标签页)时，选择一个Tab之后，Tab上的轮廓虚线会一直显示，有些影响美观。

order 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

outline是不占空间的，既不会增加额外的width或者height
outline有可能是非矩形的