margin属性和padding属性的区别?

下面给大家讲解的是css代码中margin属性和padding属性的区别，下面来详细给大家讲解下。

css代码中Margin和padding属性的区别：

margin：指的是边框以外的留白；
padding：指的是边框与图文内容之间的留白；
总结，margin属性设置的是外边距，padding属性设置的为内边距。

1、Margin属性

Margin属性包括有margin-top、margin-right、margin-bottom、margin-left，这个属性主要控制的是边框之外的的留白，如果Margin属性上右下左margin值均为40px，可将代码设置为：
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根据上, 右, 下, 左的顺时针规则, Margin属性可简写为margin: 40px 40px 40px 40px;
如果上下，左右的margin属性值是一样的，那到就可以将margin属性的CSS代码写成margin: 40px 40px;，第一个40px代表的是上下的margin属性值，后一个40px代表的是左右的margin属性值；
当上下左右的margin属性值都相同，那么margin属性值可以简写为margin: 40px;

2、Padding属性

Padding属性包括有padding-top、padding-right、padding-bottom、padding-left，这个元素主要控制的是边框与图文内容之间的留白，Padding属性值可参考以下的写法。
例1：padding:10px 5px 15px 20px;
上内边距是 10px；
右内边距是 5px；
下内边距是 15px；
左内边距是 20px。
例2：padding:10px 5px 15px;
上内边距是 10px；
右内边距和左内边距是 5px；
下内边距是 15px。
例3：padding:10px 5px;
上内边距和下内边距是 10px；
右内边距和左内边距是 5px。
例4：padding:10px;
所有4个内边距都是 10px。