markdown 盒模型中的边距和填充属性

Posted 2021-05-05

### 区别

>padding为“内推（元素的content与border）”，margin为“外攘（元素与元素）”

### 用法

属性后面可以有四个值，中间用空格隔开（不是逗号）

顺序是“上右下左”

也可以不足四个值：

```
margin: 2em /*所有的margin都设为2em*/  
margin: 1em 2em /*上下margin为1em，右左margin为2em*/  
margin: 1em 2em 3em /*上margin为1em，右左margin为2em，下margin为3em*/  
```

```
#el {
  margin:1em 2em 3em 4em;
}

等同于

body {  
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 4em;
}
```

```
.el {
  padding:1em 2em 3em 4em;
}

等同于

body {  
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 4em;
}
```