CSS top、margin-top和padding-top的区别

参考文献

CSS padding 属性

CSS里的padding是什么意思？

CSS margin 属性

top、margin-top的区别

padding指内边距，是盒子里面内容到边框的距离，不允许使用负值。
padding:10px 5px; 上内边距和下内边距是10px，右内边距和左内边距是5px。
padding:1px 2px 3px 4px; (上右下左)
padding:10px; 所有4个内边距都是10px。

margin指外边距，是边框到外部另一元素之间的距离，允许使用负值。
margin:10px 5px 15px 20px;(上右下左)
margin:10px 5px; 上外边距和下外边距是10px，右外边距和左外边距是5px。
margin:10px; 所有4个外边距都是10px。

top、margin-top的区别：
1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。
2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。