margin和padding的使用场景

在html文档中，margin和padding属性是盒子模型的组成部分，正确理解这两个属性也是学习用css布局的关键。

盒子模型:

任意一个块级元素均由content（内容），padding（内边距），background（包括背景颜色和图片），border（边框），margin（外边距）五个部分组成。【小白见图片↓】

其中

margin属性定义了元素边框外部的空白区域，给其赋值可以设置元素与元素之间的距离。

padding属性定义了元素边框内部与元素内容的空白区域，给其赋值可以设置元素与内容之间距离。

margin和padding的属性及语法

1. Margin:

包括 

    margin-top    上边外边距

    margin-right  右边外边距
    
    margin-bottom 底部外边距
    
    margin-left   左边外边距
    

控制块级元素之间的距离，他们是透明不可见的，可以分别给其四个方向赋值，也可以简写，其中属性值可以是具体数字，也可以是百分比%，当用百分比时，百分比参考父元素的宽度。

例如：

    margin:20px 30px 40px 50px;表示上右下左分别为:20px，30px，40px，50px。

    margin:20px 30px 40px;     表示上右下左分别为:20px，30px，50px，30px。

    margin:20px 30px;          表示上右下左分别为:20px，30px，20px，30px。

    margin:20px;               表示上下左右都为:20px
    

2. Padding:

包括：
    padding-top     上边内边距
    padding-right   右边内边距
    padding-bottom  下边内边距
    padding-left    左边内边距

控制块级元素内部内容content和border之间的距离，其代码简写请参考margin属性的写法。

什么时候使用margin？什么时候使用padding？

使用margin值的情况:

1.需要在border外侧添加空白时;

2.空白处不需要背景色时;

3.上下相连的两个盒子之间的空白需要相互抵消时，如15px+20px得margin，将得到20px的空白。（margin折叠）

4.需要使用负值对页面布局时（margin值可以取负值，padding不行）。

使用padding时的情况:

1.需要在border内侧添加空白时。

2.空白处需要背景（色）时。

3.上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。

最后，需注意margin是用来隔开元素与元素的间距;

padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不干扰;

padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。

在怪异盒模型中，一个块的总宽度受margin影响但不受padding影响。