翻了一些資料，自己又寫了寫，算是做到了簡單的區分。
先copy一張圖過來，這張3d圖很有直觀的看到了三者的區別。padding是層內的，邊框以內的；border是邊框；margin是邊框以外的。接下來，就是自己寫代碼熟悉一下了。
1、先寫一個最簡單的文檔，背景爲藍，只有一句話，這句話背景爲白色。接下來就可以試驗了。
<body>
<style type="text/css">
body{
background :#2594e3;
}
p{
width: 400px;
background :#fff;
}
</style>
<p>This is a test for margin, padding, and border</p>
</body>
2、添加padding，查看padding是如何作用於邊框之內的。
<body>
<style type="text/css">
body{
background :#2594e3;
}
p{
width: 400px;
background :#fff;
padding-top :20px;
}
</style>
<p>This is a test for margin, padding, and border</p>
</body>
很明顯，文字（content）距離上面遠了，但是就整個層而言，位置其實是沒有變化的
3、添加border，查看border如何增大了邊框
<body>
<style type="text/css">
body{
background :#2594e3;
}
p{
width: 400px;
background :#fff;
border :10px solid #fff000;
}
</style>
<p>This is a test for margin, padding, and border</p>
</body>
4、查看margin是如何影響邊框以外的距離的。
<body>
<style type="text/css">
body{
background :#2594e3;
}
p{
width: 400px;
background :#fff;
margin-top :200px;
}
</style>
<p>This is a test for margin, padding, and border</p>
</body>
