margin background_div盒子的外部距离(margin)【202】。

一、盒子的外部距离，在网页中主要是用来给盒子定位的。

因为盒子天生就在浏览器的左上角，所以本例我们设置的是盒子的顶部距离和左边距离来控制盒子的位置，具体用到了margin-top和margin-left。

图1

我这里是用vscode下做的，如下图：

图2

二、margin在样式里指的盒子的外部距离，分为四个方向，上下左右。

1. margin-top:10px;上距离
2. margin-left:10px;左距离
3. margin-right:10px;右距离
4. margin-bottom:10px;下距离

三、margin还可以简写，写法如下：

1. margin 10px;上下左右距离为10像素
2. margin 10px 20px;上下距离为10像素 左右距离为20像素
3. margin 10px 20px 30px;上距离是10像素 左右距离是20像素 下距离是30像素
4. margin 10px 20px 30px 0px;上距离是10像素 右距离是20像素 下距离是30像素 左距离是0像素

大家不要懵了，其实第4很好记，就是从上开始，顺时针依次到右，到下，到左。图2可以如下图简写：

图3

---

 Document