一、模型：
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
二、外边距
margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
margin:10px 20px 20px 10px； ???????上边距为10px ???????右边距为20px ???????下边距为20px ???????左边距为10pxmargin:10px 20px 10px; ???????上边距为10px ???????左右边距为20px ???????下边距为10pxmargin:10px 20px; ???????上下边距为10px ???????左右边距为20pxmargin:25px; ???????所有的4个边距都是25px
三、内填充
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
设置同margine；
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.outer{ ???????????margin: 0 auto; ???????????width: 80%; ???????} ???????.content{ ???????????background-color: darkgrey; ???????????height: 500px; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.page-area{ ???????????text-align: center; ???????????padding-top: 30px; ???????????padding-bottom: 30px; ???????????background-color: #f0ad4e; ???????} ???????.page-area ul li{ ???????????display: inline-block; ???????} ??????.page-area ul li a ,.page-area ul li span{ ???????????display: inline-block; ???????????color: #369; ???????????height: 25px; ???????????width: 25px; ???????????text-align: center; ???????????line-height: 25px; ???????????padding: 8px; ???????????margin-left: 8px; ???????????border: 1px solid #e1e1e1; ???????????border-radius: 15%; ???????} ??????.page-area ul li .page-next{ ??????????width: 70px; ??????????border-radius:0 ??????} ??????.page-area ul li span.current_page{ ??????????border: none; ??????????color: black; ??????????font-weight:900; ??????} ??????.page-area ul li a:hover{ ??????????color: #fff; ??????????background-color: #2459a2; ??????} ???</style></head><body><div class="outer"><div class="content"></div><div class="page-area"> ????????????<ul> ????????????????<li><span class="current_page">1</span></li> ????????????????<li><a href="#" class="page-a">2</a></li> ????????????????<li><a href="#" class="page-a">3</a></li> ????????????????<li><a href="#" class="page-a">4</a></li> ????????????????<li><a href="#" class="page-a">5</a></li> ????????????????<li><a href="#" class="page-a">6</a></li> ????????????????<li><a href="#" class="page-a">7</a></li> ????????????????<li><a href="#" class="page-a">8</a></li> ????????????????<li><a href="#" class="page-a">9</a></li> ????????????????<li><a href="#" class="page-a">10</a></li> ????????????????<li><a href="#" class="page-a page-next">下一页</a></li> ????????????</ul></div></div></body></html>CSS 外边距和内填充
原文地址：http://www.cnblogs.com/liuxiaowei/p/7574088.html