margin属性

margin与元素尺寸以及相关布局

1. 元素尺寸的相关概念：
   元素尺寸：指元素的border-box。
   元素内部尺寸：元素的padding-box。
   元素外部尺寸：元素的margin-box。
   元素尺寸和元素内部尺寸决定元素自身的尺寸大小，元素外部尺寸决定了元素与其他元素的位置关系，不影响自身尺寸。

2. margin与元素的内部尺寸
   在默认水平流方向下，margin只能改变左右方向的内部尺寸，并且只有元素是充分利用可用空间的时候margin可以改变元素的可视尺寸，例如width为auto的块级元素，当元素设定了width或呈包裹性时，margin对可视尺寸无效。
   比如说如下CSS

      .father{
   
          width:200px;
          margin:0 -20px;
      }

此时元素还是200px，尺寸无变化，因为只要width设定了宽度，那么margin就不能改变元素的可视尺寸。但是如果是一下HTML和CSS

      .father{
   
          width:200px;
      }
      .son{
   
          margin:0 -20px;
      }

    <div class="father">
        <div class="son"></</