前端全栈基础之CSS中margin，padding

一、margin属性

Margin属性有以下一些属性值：

1.margin-top: 设置元素上方的外边距大小；

2.margin-right: 设置元素右侧的外边距大小；

3.margin-bottom: 设置元素下方的外边距大小；

4.margin-left: 设置元素左侧的外边距大小；

5.margin: 可以同时设置四个方向的外边距大小；

- 合写margin属性,直接后边跟4个值:分别代表 上 右 下 左

- 合写margin属性,直接后边跟3个值:分别代表 上 左右 下

- 合写margin属性,直接后边跟2个值:分别代表 上下 左右

- 合写margin属性,直接后边跟1个值:代表所有方向都是这个值

Margin属性的值可以为像素（px）、百分比（%）、em等单位，也可以为auto、inherit等关键字。以下是Margin属性的一些常用用法：

/* 分别设置每个方向的外边距：*/

margin-top: 10px;

margin-right: 20px;

margin-bottom: 30px;

margin-left: 40px;

padding 属性设置或返回元素的内边距。

该属性可使用 1 到 4 种值：

• 如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。
• 如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。
• 如果规定三种值，比如：div {padding: 50px 10px 20px} - 上内边距是 50px，左内边距和右内边距是 10px，下内边距是 20px。
• 如果规定四种值，比如：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px。