margin和padding介绍及使用场景

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:40px 20px 30px 50px;表示上右下左分别为40px，20px，30px，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.空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px＋10px将得到25px的空白。
最后，需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不干扰;padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。
在怪异盒模型中，一个块的总宽度受margin影响但不受padding影响。

逆战班-屈县波