【小白学HTML5】盒模型（一文讲清margin、padding）_第三讲

根据第一讲的内容，我们知道margin是外边距、padding是内边距，那么内外边距该怎么设置呢？

1、margin：外边距

第一种情况：比如设置外边距为上10px、右20px、下30px、左40px

外边距可以分别设置为：margin-top:10px;上外边距，margin-right:20px;右外边距，margin-bottom:30px;下外边距，margin-left:40px;左外边距，简化的格式为：margin:10px 20px 30px 40px，分别对应上右下左（顺时针）。

第二种情况：设置同等外边距，如设置10px

写法：margin:10px

第三种情况：设置上下边距为10px，左右为5px

写法：margin:10px 5px，相反设置为margin:5px 10px，分别对应：上下左右

第四种情况：不同的边距，如设置上10px，下为20px，左右为5px

写法：margin:10px 5px 20px；中间的代表左右。

2、padding：内边距，与margin相同。

总结：

（1）单值，上下左右全部相等，margin:10px;

（2）双值：上下相等，左右相等，margin:5px 10px;

（3）三值：左右相等，margin:5px 10px 15px

（4）四值：上右下左，margin:10px 20px 30px 40px