margin与 padding的区别

margin和padding这两兄弟，总是在一起使用，我以前总是搞混，分不清谁是谁。经过几天的思考，今天在此总结一下：

1. 首先，从位置区分

margin和padding之间是有一条分界线的，而这个分界线就是边框border。border里的就是padding，border外的就是margin。

2. 其次，从作用方向区分

Padding，是从边框border向内挤压，使得内容移动

Margin，是从border向外挤压，使得区块移动

形象的理解就是，padding就相当于握拳的动作，而margin就相反的动作，即将握拳的手展开。

3. 再次，从数值区分

margin，容许其值为负值。而padding是不容许值为负

 

 

padding和margin也有共同点：

1. padding，border和margin可以应用于一个元素的所有边，也可以应用与单独的边

2. 当padding时百分比数值是，是相对于其父元素的width计算的，这一点与margin一样，所以，如果父元素的width改变，他们也会改变

提示：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度