CSS中margin和padding的上下左右

Box model的关键便是margin和padding属性，margin和padding分别是控制块级元素之间和内部的距离。

其中上下左右的距离分别：

margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;

padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;

这样分别来写显得很麻烦，可以直接用类似于margin: 20px 30px 40px 50px;/margin:40px;/margin:20px 30px; 和 padding:20px 30px 40px 50px;/padding:30px等等简写。这其中的顺序是怎样的呢，我们应该正确理解才能使用。

首先说明一下，margin和padding顺序是一样的，我们来看一下：

margin: 20px 30px 40px 50px;     代表： 上  -   右  -  下  -   左

margin:20px 20px 30px;   代表： 上  -  左右   - 下

margin:20px 30px;      代表：上下  - 左右

maring:20px;   代表： 上下左右

基本就是这个样子。End