padding 内边距
padding 属性用来指定元素的内容与元素边框之间的空隙。
padding 属性的单位通常是像素，也可以是EM和百分比。
如果使用百分比，内边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加内边距，原来盒子的整体大小会增大。
如下面的示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距padding</title>
<style>
p{
width:300px;
border:2px solid #333;
}
p.one{
padding:10px;
}
</style>
</head>
<body>
<p>测试文本！</p>
<p class="one">测试文本！测试文本！</p>
</body>
</html>效果图：
内边距还有4个方向的属性，分别指明4个内边。
padding-top
padding-right
padding-bottom
padding-left
这样排序的序列是因为padding属性的快捷试写法指定的值是按这样的序列的。
分别为4个内边距设置不同的数值，可以做不不规则的外观。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不规则内边距padding</title>
<style>
p{
width:300px;
border:2px solid #333;
}
p.one{
padding-top:20px;
padding-right:30px;
padding-bottom:10px;
padding-left:50px;
}
</style>
</head>
<body>
<p>测试文本！</p>
<p class="one">测试文本！测试文本！</p>
</body>
</html>
margin 外边距
margin 属性用来指定盒子之间的空隙。
margin 属性的单位通常是像素，也可以是EM和百分比。
如果使用百分比，外边距就是浏览器窗口的一个百分比。
如果一个盒子的宽度已经指定，后面再添加外边距，原来盒子的整体大小会增大。
两个一样大小的盒子，有外边距的盒子会多出空隙。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距margin</title>
<style>
p{
width:300px;
border:2px solid #333;
padding:10px;
}
p.one{
margin:10px;
}
</style>
</head>
<body>
<p>测试文本！</p>
<p>测试文本！测试文本！</p>
</body>
</html>
下面的盒子有外边，上面的盒子没有外边，放在一起就产生了折叠效果。
外边距在页面排版细节处理上特别有用，如一点细微调整、对齐等。
外边距还有4个方向的属性，分别指明4个外边。
margin-top
margin-right
margin-bottom
margin-left
这样排序的序列是因为margin属性的快捷试写法指定的值是按这样的序列的。
分别为4个外边距设置不同的数值，可以做不不规则的外观。
示例，略，大家可以尝试下。
内容居中
居中是排版中常见的需求，有文本居中对齐，盒子居中对齐。
盒子居中对齐很简单，只要将margin-left和margin-rigth的值设置为auto即可。
如果要盒子在页面中居中，需要为盒子指定一个宽度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中</title>
<style>
p{
width:300px;
border:2px solid #333;
padding:10px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<p>测试文本！测试文本！</p>
</body>
</html>
更多web前端知识，请查阅 HTML中文网 ！！
