margin:

margin:

margin:

margin:

padding:

padding:

padding:

padding:

適用したい要素の余白部分を、半角スペースで区切って値を上右下左の順に指定する。値は4つまで指定可能で、指定した数によって解釈が変わる。必ず単位を付記する必要あり。

margin: 0 20px 0 0;
margin-right: 20px;
↑上の二つは同義

marginとpaddingの違いは、borderやbackgroud等指定した要素の範囲外と範囲内です。
marginは言葉の意味の通り、欄外の余白で、paddingは詰めると言う意味で欄内の余白。用途考えてもこの違いが分かれば十分かと。

margin 　 padding     子要素   ←border padding   margin

padding: 10px; margin: 50px;

padding: 50px; margin: 10px;

下のtableは、薄い部分に更にpadding:10px;を指定した例。
濃い部分のmargin:50px;に薄い部分のpadding:10px;が加算されて60pxの間隔になった。
親要素と子要素で別々に指定した値は加算されるんやなぁ。

padding: 10px; margin: 50px;

下のtableは、tdにmargin:20px;を指定してみた例。特に何も変化はない模様。td、trともにtableのﾈｽﾄだから欄外の概念ないのかな。と勝手に納得。imgﾀｸﾞにpadding指定するよーなものかな。

padding: 10px; margin: 50px;