どっちがmargin(マージン)でどっちがpadding(パディング)か迷う人を救済する記事

どっちも『余白』と説明される問題

CSSを勉強し始めたばかりの人たちにとっては、『padding』や『margin』など、聞き慣れない英語がいっぱい出てきて、その上日本語訳が「内側の余白」「外側の余白」となると、もう覚えずらいことこの上ないですよね。今回は覚えるお手伝いをしたいと思います。

解決策1:知っている言葉と関連付けて覚える

padding(パディング)は和訳すると『詰め物』なんて意味があります。
肩パッドなんかが連想しやすいと思います。
肩パッドは内側につけるので、paddingはborderの内側という感じで覚えて見ましょう。

marginは、paddingじゃない方だから、borderの外側。

解決策2:イメージで覚える

解決策1でpadding(パディング)は和訳すると『詰め物』と説明しました。
では、なにかを梱包する想定で考えましょう。
下のようなイメージです。

ここでいうpaddingは、緩衝材の代わりにしている白いタオルです。

ではmarginはどこでしょう。正解は箱の外側です。
他の要素との隙間を空ける用途でよく使うと思いますので、箱を2つ並べてみました。

最後に

小さい頃と違って、おとなになると関連性のないことを覚えづらくなるらしいです。
逆に、関連付けると頭に残り易くなります。
今回のことに限らず「記憶力がおちた」と単純に考えず、なにかに関連付けて頭に入れるようにしてみてください。勉強したことが頭に残りやすくなりますよ!