区分CSS中margin和padding

我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向
如何理解margin与padding，我们首先可以想象一下我们手里拿了一个钻戒，钻戒都是在盒子里放着，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。