上のオレンジの部分がmarginで、黄緑の部分がpaddingです。
marginは、ほかの要素との距離、paddingは内容との距離を表します。
(ふきだしは本当はないです。分かりやすくするために分けました。本来は下の図です。)
つまりmargin=外の余白、padding=内の余白です。
だから、backgroundなどで背景を指定したとき、反映されるのはpaddingで、marginには反映されません。
きちんと使い分けるようにしましょう(というかできないと少し困ると思います。)
ちなみにpaddingとmarginの境界部分がborderにあたります。
