※蘭さん：試著將margin以較詳細方式寫一下範例，希望可以幫助到想了解margin的人。

//html程式碼
//表格外上下左右距離0px，0px的時候可簡寫為0
<div class="divZero">margin : 0; </div>
//表格外上下左右距離5px
<div class="div1">margin : 5px; </div>
//表格外上下左右距離10px
<div class="div2">margin : 10px; </div>
//表格外上下距離5px，左右10px
<div class="div3">margin : 5px 10px; </div>
//表格外上方距離5px，下方20px，左右10px
<div class="div4">margin : 5px 10px 20px; </div>
//表格外上方距離5px，下方15px，左邊10px，右邊20px，也就是依序為上右下左
<div class="div5">margin : 5px 10px 15px 20px; </div>

//表格外上方距離20px
<div class="divTop">margin-top : 20px; </div>
//表格外右方距離20px
<div class="divRight">margin-right : 20px; </div>
//表格外下方距離20px
<div class="divBottom">margin-bottom : 20px; </div>
//表格外左方距離20px
<div class="divLeft">margin-left : 20px; </div>

<div>
	//表格外下方距離20px
	<div class="divBottom">margin-bottom : 20px; </div>
	//表格外上方距離20px
	<div class="divTop">margin-top : 20px; </div>
</div>

//表格外上下距離0px，左右自動調整(因為div寬度一定是100%，所以auto等同沒有設定
<div class="divAuto">margin : 0px auto; </div>
//表格外上下距離0px，左右自動調整(因為div寬度設定300px，所以左右會自動調整大小
<div class="divAuto2">margin : 0px auto; width:300px; </div>

//css程式碼
div {border:1px solid #333;}
div.divZero { margin: 0; }
div.div1 { margin: 5px; }
div.div2 { margin: 10px; }
div.div3 { margin: 5px 10px; }
div.div4 { margin: 5px 10px 20px; }
div.div5 { margin: 5px 10px 15px 20px; }
div.divTop { margin-top: 20px; }
div.divRight { margin-right: 20px; }
div.divBottom { margin-bottom: 20px; }
div.divLeft { margin-left: 20px; }
div.divAuto { margin: 0 auto; }
div.divAuto2 { margin: 0 auto; width:300px;}

※蘭さん：注意，最後倒數第三個的表格裡面，上div設下面margin，下div設上面margin，因為margin的位置是一樣的，他們會以最大的為主。

css-margin範例