内边距与外边距

一、内边距（padding）

padding:内边距， 是指 ：边框与内容之间的距离。

• padding-top:上内边距
• padding-right:右内边距
• padding-bottom:下内边距
• padding-left:左内边距

后面跟几个数值表示的意思是不一样的；

值的个数	表达意思
1个值	padding: 3px;上下左右都是3像素
2个值	padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

二、外边距（margin）

margin：外边距， 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。

一、外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

二、文字盒子居中图片和背景区别

1. 文字水平居中是 text-align: center
2. 盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

3. 插入图片： 我们用的最多， 比如产品展示类
4. 背景图片：我们一般用于小图标背景 或者 超大背景图片