盒子模型与(left right top bottom)

经常会将margin、padding、(left right top bottom)混淆，本次下定决心整理记录。
此为本人第一次写，若有不足，多多指正。

1、定义

margin为外边距宽度，指元素边框至盒子模型边界之间的区域。包括margin-top、margin-right、margin-bottom、margin-left

padding为内边距宽度，指一个元素的内容和边框之间的区域。包括padding-top、padding-right、padding-bottom、padding-left

(left right top bottom)为定位元素外边距边界与其包含块边界之间的偏移，非定位元素设置此属性无效

2、比较

准确来说，(left right top bottom)与margin、padding是没有可比性的。因为，前者用于定位，后者属于盒子模型。但是，（left right top bottom)有时可以实现与margin类似的效果，这会对初学者造成困扰。

首先，应该准确理解盒子模型，建议参考https://www.cnblogs.com/smyhvae/p/7256371.html
尽管此文章基于CSS2.1，但是依然有借鉴价值，可以对盒子模型有一个较好的理解。

其次，应该理解(left right top bottom)，建议参考mdn

接着，上代码及效果。

//html

      

        
      
      

        
section one
        
section two
        
section three
        
section four
      
    

//css
.wrapper {
  .picture {
    display inline-block
    width 80px
    height 80px
    margin 10px
    vertical-align top

    img {
      width 100%
      height 100%
    }
  }

  .content {
    position relative
    display inline-block
    left 50px

    .section {
      display inline-block
      width 80px
      height 80px
      margin 10px
      border 1px solid #cfcfcf
      padding 10px
      font-size 16px
    }
  }
}

最终效果

image.png

上图中，从内到外分别为section的width、padding、border和margin
红色箭头为content的left。

注意，设置(left right top bottom)时，需设置对应元素的position，不同的position，表现不同。若为relative，相对于元素在文档流中的正常位置偏移；若为absolute，相对于元素的包含块边界偏移；若未设置positon或设置为static，则不生效。
在此处，若设置position为absolute，则content相对于wrapper偏移50px，最终效果如下图：

image.png

最后，总结一下。若需要对元素设置自身的内外边距，则使用margin和padding；若需要移动元素的位置，则使用(left right top bottom)

3、扩展

标准盒子模型和IE盒子模型对元素的width和height计算不同。标准盒子模型以content的宽度和高度作为元素的width和height，IE盒子模型以content+padding+border作为元素的width和height。这会导致前端工程师大量的兼容工作。

幸好，CSS3提供了一个新的属性box-size，它有两个值：border-box和content-box。若设置为border-box，则元素的width为content+padding+border；若设置为content-box，则元素的width为content的宽度。