Panda Noir

JavaScript の限界を究めるブログです。

marginとpaddingの違い

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