在css编辑中，很多属性会容易混淆，特别是margin和paddin。
下面我就结合对这两个属性的研究结果，给大家介绍下他们的区别，希望对朋友们有用。
简单的说 margin是对外元素的距离（外补丁），而padding是对内元素的距离（内补丁）。
下面看几个例子：（红色为新增的属性）
1－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;}
ul{700px;background:#8855ee;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
2－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;}
ul{700px;background:#8855ee;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
3－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;padding:10px;}
ul{700px;background:#8855ee;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
4－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;padding:10px;}
ul{700px;background:#8855ee;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;margin:10px;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
5－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;padding:10px;}
ul{700px;background:#8855ee;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;margin:10px;padding:10px;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
6－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;padding:10px;}
ul{700px;background:#8855ee;margin:10px;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;margin:10px;padding:10px;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
7－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<style>
*{margin:0 auto;padding:0;list-style:none;}
body{text-align:center}
div{750px;border:1px solid #000;background:#aaaaaa;margin:10px;padding:10px;}
ul{700px;background:#8855ee;margin:10px;padding:10px;}
li{100px;border:1px solid #000;float:left;display:inline;background:#881100;margin:10px;padding:10px;}
</style>
<div>
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
</div>
