負けいくさのデザイン変更でCSSをいろいろイジっていたのですが、余白の値を決めるmarginとpaddingがとにかくややこしいんです。「margin: 10px 20px 10px 30px;」なんて書いてあったら、なんのこっちゃと思わざるをえないわけです。
marginってのは英和辞典で調べると、余白とか欄外という意味です。基準となる線の外側にいくら余白を設定するか、というのがmarginなのです。デザイン業界の方であれば「版面」と「マージン」という言葉は当たり前のように使っておられるとは思いますが、文字情報や図版などを配置できる領域を「版面」といい、それ以外の領域を「マージン」と言います。外側の余白をマージンと言うのだと覚えておけば、marginとpadding、どっちが外側でどっちが内側だっけ？と悩むことは少なくなるのではないでしょうか。
paddingも、詰め物をするという意味はあるんですよ。要は、肩パッドという言葉と一緒です。基準線に対して内側に余白を設定するのがmarginなのですが、詰め物をするという意味を知っていると、とてもわかりやすくなります。
もう一つ知っておくと便利なのが、数字が4つ並んでいる時は12時、3時、6時、9時の時計回りだと覚えておきましょう。「padding: 10px 20px 10px 30px;」というのは、「基準線の上から内側に10ピクセルの余白を作ります、その次に基準線の右から内側に20ピクセルの余白を作ります、基準線の下から内側に10ピクセルの余白を作ります、最後に基準線の左から30ピクセルの余白を作ります」という意味になります。ぐるっと時計回りにほいほいと。
CSSの教科書もこのくらいに丁寧に説明してくれたらありがたいのですが、あんまりここまで説明してくれているところはないんですよ。というわけで、今回は自分用のメモとして、marginとpaddingの違いについて、書いておきました。
