HTML之margin和padding的区别

想要理解margin和padding的区别，首先应该明白在进行网页制作时都会遇到设定边距的情况，边距又分为外边距（margin）和内边距（padding）

margin的用法

1、设置距离同级标签的间距；
2、设置距离父标签的间距；

关于边距距离的设定，规则如下：

margin: 20px;/*四周相同*/
margin: 10px 20px;/*10px上下 20px左右 */
margin: 10px 15px 30px;/*10px上  15px左右  30px下*/
margin: 10px 15px 20px 25px;/*上右下左*/

设置自动居中则可以使用

margin：0 auto；

padding的用法
大体上来说，与padding 略有不同，但是在距离设定上一致，此处不再叙述

区别
margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。具体可以参考下示意图：
margin示意图：

padding示意图