前端——margin和padding的使用

今天学盒模型，学了两个最重要的元素：margin和padding。

盒模型是布局中至关重要的一个东西，基本上只要掌握了盒模型，布局就没有大碍。而margin和padding作为盒模型里面极其重要的两个元素，弄懂这两个东西，就基本上弄懂了盒模型，也基本上具备了快速布局的能力。

盒模型如下图：

• Margin - 边界外的透明区域。
• Border - 边框在填充和内容周围。
• Padding - 内容周围的透明区域。
• Content - 实际文本和图像。

从上图可以知道，margin称作外边距，用来定义元素周围的空间。

1、margin语法示例：

属性	作用
margin-top:5px;	定义上边距为5px
margin-right:5px;	定义右边距5px
margin-bottom:5px;	定义下边距5px
margin-left:5px;	定义做边距5px

当然，这些属性除了可以单个设置，它也可以一起设置。

四个值时	margin：上 右 下 左 （即顺时针方向）
三个值时	margin;上 左右 下
两个值时	margin：上 下
一个值时	margin：上下左右

 

2、padding语法示例

padding用于在设定页面中一个元素内容到元素的边缘(边框) 之间的距离，也称作留白。

它用于调整内容在容器中的关系、子元素在父元素中的关系。padding需要设置在父元素中。

padding的语法和margin类似，使用方法也一样。只不过padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值 

 

从功能上来看，padding和margin很多时候的效果一样，但他们两个的使用还是有些区分的。

用margin：

1. 需要在border外添加空白时。
2. 空白处不需要父元素背景色时。

用padding：

1. 需要在border内侧添加空白时。
2. 空白处需要父元素背景色时。

此外，margin和padding还有一个作用的区分：当你想要两个相连的盒子之间的空白为35px，时，你可以设置第一个盒子的margin-bottom为34px，或者第二个盒子的margin-top为35px；你也可以分别设置第一个盒子的padding为15px，第二个盒子的padding为20px；

总而言之，margin时用来隔开元素的间距，而padding时用来隔开元素与内容。margin在布局是用来分隔开各个元素，使其互不相干，而padding用于在元素和内容之间添加间隔。