top、padding-top、margin-top的区别(以及个人总结)---前端进阶(随笔)

距离上一篇博客，已经过去了蛮久了。之前一直在看《js高程》，感觉看了一遍，没有看懂，回来干脆花了2个月的时间把整本书敲了一遍，才感觉有些收获。我从2016.09开始的接触前端，到现在已经过去了9个月了。虽然学了这么久，但是还是没有入门。2016.9-2017.1我是一边练习打字，一边看HTML、CSS的视频和书，这期间练习的很少。过完年之后，2017.2月才开始慢慢接触JS，也是把《JS高程》《DOM的编程艺术》过了一遍，但是感觉没记住，也没怎么理解，于是2017.4月把《JS高程》敲了一遍。说实话，现在脑子里，还是听乱的。没有建立自己的知识体系。2017.5因为知乎上的一片文章，就知道了FCC，所以最近在做上面的题目，后面的编程题目，感觉要花很多时间，应该是自己编程思维弱，做的比较吃力。

一直走到现在，感觉走的很迷茫。学习方法不到位，所以走了很多弯路，浪费了一些时间。所以，希望后续进入前端的小伙伴，多和前端的前辈聊一聊，这样就会少走弯路。

好了，开始正题。

top、padding-top、margin-top的区别。

（1）padding-top、margin-top的区别：一个是内边距，一个是外边距。先来看一下边距，都用过word文档吧，页面上 打印区域之外的空白区域就是页边距，相当于CSS里的内边距padding!]


而margin则是用来定义元素周围的空间。比如上、下、左、右的空间。margin始终是透明的。不能设置背景色。我们都上过学吧，座位与座位之间的距离就是margin。如图


小总结：例如：padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不包 含在容器内；

（2）margin-top和 top的区别

margin用来定义容器本身距离其他容器的距离。比如：作为1距离座位2的距离，座位1距离讲台的距离都是margin。

当我们为了表式小明同学坐在哪个位置的时候，一般会说坐在第几排的第几个吧。如果把教室看成一个长方形，左上角是坐标原点（0，0）。小明的座位是（2，2），我们就可以说小明距离教室黑板的距离top：2，距离教室的左墙壁的距离left：2。所以使用top的时候，有一种绝对定位的感觉。看图


小总结：margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不包 含在容器内；

top:10px;是指容器本身的顶部距离页面的顶端有10个像素。

写的不是特别好，希望对你们有用。2017.06.07.为高考加油！