文章目录
margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。
不清楚规则，见：
盒子模型（一）：初识盒模型 、 边框 [第四天]
auto详情，见：
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css（font-weight）] / 详解分割线hr标签 / 初见border / 详解auto（第二天）
padding(填充)
CSS padding(填充)是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
当元素的 padding(填充) 内边距被设置时，所该区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
总
轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
代码如下：
<body>
<div
style="width: 300px;height: 30px;outline-style:solid;outline-color: red ; outline-width:5px;border: solid blue 3px;">
this is a outline
</div>
<div style="width: 300px;height: 30px;border: solid yellow 10px;z-index=10000;">
see the result
</div>
<div>
<p style="display: inline;outline-style:solid;outline-color: red ; outline-width:20px;">this is a outline</p>
<p style="display: inline;border: solid blueviolet 10px;">see the result</p>
</div>
</body>
运行结果：
这里可见：
- outline确实不占空间，因为底下元素的border被覆盖了一部分；也由此可见，outline的z-index较高，反正菜鸟将底下的黄色边框的div的z-index调整到10000都无法显示在上面！
- 大家可以看见，最上方的div没有和黄色边框的div对齐，其实是对齐了的，只是outline不占空间，所以覆盖了body默认的边距的一部分！
- 由此可见，元素对齐，其实是元素最边缘相互对齐，因为outline不属于元素，所以才会看起来像没有对其！如图：
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
Outlines在两个方面不同于边框：
- Outlines 不占用空间
- Outlines 可能非矩形
outline-color【invert不重要】
outline-color属性指定轮廓颜色。
注意：
请始终在 outline-color 属性之前声明 outline-style 属性，元素只有获得轮廓以后才能改变其轮廓的颜色。
同border一样，现在先后顺序错了还是能正确显示。但是最好按规定来，先outline-style，然后outline-color和outline-width随意！
注意：
这里第二个，菜鸟摸不着头脑，不知道是什么意思！因为菜鸟设置父元素、该元素的背景色为黑色，但是这个invert还是没有把outline-color变成白色，而且在goole、Firefox中，发现根本无法设置！如图：
goole：
Firefox：
2020/8/11补：
该参数值目前仅在IE及Opera下有效！
outline-offset(在 border 边缘外的偏移)
outline-offset属性设置轮廓框架在 border 边缘外的偏移。
注意：
这个属性，无法分开设置上下左右；一旦设置，就是四边都产生相应的偏移！
outline-style
outline-style属性指定outline的样式。（和border类似，但是没有hidden）
对应的效果：(这里前四个太简单，所以不作展示)
注意：
- 这里要注意的是，这里和border一样，默认为3px！
- 同样，如果你设置的宽度能整除3，则每一部分都是 宽度/3 ；如果余1，则加到中间空白部分；余2，则分别加到里、外两个边框上！
outline-width
outline-width指定轮廓的宽度。
注意：
经菜鸟实验，这里也和border一致，thin=1px、medium=3px、thick=5px！
outline
outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是（按顺序）：outline-style，outline-color， outline-width
注意：
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。必须带上outline-style，没有样式，其它都无从实现，另外两个，可以省略，会按默认值处理！
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
