margin paddingってなんだよ

隣のコーダーさんが「魔神」「パディング」とよく呟いていたので何かの呪文かと思っていたのですが、どうやらCSSのコードの一つみたいですね。
ウェブデザイン技能検定の問題で存在を知ることになるとは…
いつも分からなくなるので違いのメモを作ってみました。

marginもpaddingもどちらも余白
2つの違いは余白ができる位置にあります。
コンテンツの入っているボックスをひとつの箱と捉え、
その箱の境界(border)から

margin・・・外側の余白
padding ・・内側の余白

今日はこれだけさっくり覚えてひとつ賢くなりましょう。
背景画像が反映されるのはborderからなのでpadding部分には背景画像が表示されます。
Marginには相殺機能があり、レイアウトの調整に使いやすい、それぞれちゃんと特性があるみたいですね。
使い分けながらデザイン指示を出せるようになりたい…

ところで久々に図を作ってみたのですがやっぱり楽しいですね！
こういう図を作る仕事をして生きていきたい…仕事がほしい…
WEBの勉強もしながらデザインも再開しようかな。
それではまた！