どっちも『余白』と説明される問題
CSSを勉強し始めたばかりの人たちにとっては、『padding』や『margin』など、聞き慣れない英語がいっぱい出てきて、その上日本語訳が「内側の余白」「外側の余白」となると、もう覚えずらいことこの上ないですよね。今回は覚えるお手伝いをしたいと思います。
解決策１：知っている言葉と関連付けて覚える
padding（パディング）は和訳すると『詰め物』なんて意味があります。
肩パッドなんかが連想しやすいと思います。
肩パッドは内側につけるので、paddingはborderの内側という感じで覚えて見ましょう。
marginは、paddingじゃない方だから、borderの外側。
解決策２：イメージで覚える
解決策１でpadding（パディング）は和訳すると『詰め物』と説明しました。
では、なにかを梱包する想定で考えましょう。
下のようなイメージです。
ここでいうpaddingは、緩衝材の代わりにしている白いタオルです。
ではmarginはどこでしょう。正解は箱の外側です。
他の要素との隙間を空ける用途でよく使うと思いますので、箱を２つ並べてみました。
最後に
小さい頃と違って、おとなになると関連性のないことを覚えづらくなるらしいです。
逆に、関連付けると頭に残り易くなります。
今回のことに限らず「記憶力がおちた」と単純に考えず、なにかに関連付けて頭に入れるようにしてみてください。勉強したことが頭に残りやすくなりますよ！
