貼圖吧，圖一眼明了。
無效果時候有
只有一個<div>啦啦啦</div>
只有padding時候有：
padding詳細設計時：
解釋：padding是對內的，如padding-left:10px是距離左邊的的距離為10px,即相對於背景
只有margin時：
margin詳細設計時：
解釋：margin是對外的，它調整的整體，如margin-left:30px是距離瀏覽器的左邊30px
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
兩個嵌套
<div class="a">
<div class="b"></div>
</div>
無效果時：
只有padding時：
padding詳細設計時
這里的padding只是為內邊框添了一塊距離（注意這里的padding是寫在b里面的），如padding-left：2px就是為內邊框在左邊添了2px的邊境，（padding效果並不明顯╮(╯▽╰)╭）
只有margin時：
margin詳細設計時：
這里的margin只是保證了內部邊框相對於外邊框的距離（注意這里的margin的也寫在b里面），如margin-left：30px使得內邊框距離外邊框的距離為30px
妙點領悟：小實例的應用，相冊。相冊周邊的白邊可以用padding來設置，寬度則有px決定，另外設置陰影等，而margin用來確定相冊整體相對於瀏覽器的位置。
補充：
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>內外邊距詳解</title> 6 <style type="text/css"> 7 .text_a { 8 margin-top: 10px; 9 padding-top: 10px; 10 border: 2px solid #ff0000; 11 } 12 .text_b { 13 margin-top: 10px; 14 padding-top: 10px; 15 border: 2px solid #0000ff; 16 } 17 .text_b_son { 18 margin-top: 10px; 19 padding-top: 10px; 20 21 border: 2px solid green; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="text_a">text_a</div> 27 <div class="text_b">text_b 28 <div class="text_b_son">text_b_son</div> 29 </div> 30 </body> 31 </html>
生成的圖片為：
常見問題，布局時候，常遇到擺放位置的問題。這時候就應該用padding（內邊距）和margin（外邊距）來進行調整。
應注意，如圖中當擺放text_b_son在text_b中的位置時候，先用margin來調整自己的位置，再用padding來調節自己在父類框的位置。
當然不要忽略了float（浮動）的作用，首先浮動，再調節位置。