ど素人が「Progate」でhtml＆cssを学ぶ③ 『paddingとmarginの違い。』

ProgateでHTML＆CSSを学習していく中で、
『padding』と『margin』の違いというのが
いまいち理解できていないなぁと、

Progateの中でアウトプットする場である
道場コースで感じたので
違いについて調べてみました。

ネットで色々調べる中、、
こちらの風船図解がなかなか分かりやすかったです。

風船の中が『padding』、風船の外側が『margin』。
また、風船の厚みをborderで表現されています。
なるほどなるほど。
（風船に例えるという発想力がすごい。。）

【イラスト解説】paddingとmarginの違いについてわかりやすく説明するよ【初心者向け】 | ずくろぐ

また、以下のサイトでは、『margin』固有の特徴が
列挙されており、こちらもProgate外で得た新しい知識となりました。

【CSS】もう2度と迷いたくないmarginとpaddingの違い

上記辺りのサイトを参照することにより
『padding』や『margin』への理解がより深まった気がします。

progateの道場コース(初級)でも
『padding』と『margin』の使い分けに迷わず処理できました。

では、今日も空き時間を利用して
Progate中心に学習したいと思います。