1.外边距介绍

外边距是在盒子边框外的边距，除了不会撑开盒子意外，其他所有语法都和padding相同，简写的规则也一样。
image.png

注意点

虽然margin不会撑开盒子，但是子级的margin会影响到父亲的位置，原因是：外边距的相对位置是以border边框或者内边距padding为准的，如果父元素没有边框或者没有内边距则会和共用body的位置，所以如果想子元素以父元素为坐标系，则需要给父元素添加边框或者设置内边距或者设置overflow:hidden，同时也因为margin的合并特性导致的父元素塌陷问题，下面我们就介绍这个性质。
image.png

简单面试题

如何让块级元素盒子在浏览器中，水平居中。
答案：将左右外边距的值 设置为 auto即可，最常用的写法为 margin: 0 auto，0代表上下为0px，auto则是左右，这是复合写法的规则。
image.png
好家伙，终于明白为什么网页上要写 margin: 0 auto了，就是为了水平居中。
而对于行内元素或者行内块元素 给其父元素设置 text-align:center即可

2.外边距合并特性（重要）

image.png
image.png
第一种垂直合并是比较简单的，记住只设置一个方向的margin值就行

image.png
第二种比较重要，是开发中非常常见的问题，之前也说了虽然margin不会撑开盒子，但是子级的margin会影响到父亲的位置，原因是：外边距的相对位置是以border边框或者内边距padding为准的，如果父元素没有边框或者没有内边距则会和共用body的位置，所以如果想子元素以父元素为坐标系，则需要给父元素添加边框或者设置内边距或者设置overflow:hidden。并且还有父元素塌陷问题，如果子元素的margin大于父元素，则会覆盖掉父元素的margin值。

  1. div {
  2.   /* 1.设置边框 */
  3.   border: 1px solid transparent;
  4.   /*transparent代表透明边框*/
  5.   /* 2.设置边距 */
  6.   padding: 1px;
  7.   /* 3.overflow */               
  8.   overflow: hidden;
  9. }

最常用的方式就是overflow:hidden了，这个方法不会影响盒子的大小， 而另外两种都会。