经常会将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
<div class="wrapper">
<div class="picture">
<img src="../src/assets/logo.png">
</div>
<div class="content">
<div class="section">section one</div>
<div class="section">section two</div>
<div class="section">section three</div>
<div class="section">section four</div>
</div>
</div>
//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
}
}
}
最终效果
上图中，从内到外分别为section的width、padding、border和margin
红色箭头为content的left。
注意，设置(left right top bottom)时，需设置对应元素的position，不同的position，表现不同。若为relative，相对于元素在文档流中的正常位置偏移；若为absolute，相对于元素的包含块边界偏移；若未设置positon或设置为static，则不生效。
在此处，若设置position为absolute，则content相对于wrapper偏移50px，最终效果如下图：
最后，总结一下。若需要对元素设置自身的内外边距，则使用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的宽度。
