marginとpaddingって、どこの余白??

margin と padding って、どっちが内側でどっちが外側の余白だっけ??

あー、しかもどのへんに余白が表示されるんだっけ??

と、いつも忘れてしまいます。。。

 

頭文字から何か表現できないか考えてみましたがなかなか思いつかないので、

お中元やお歳暮で頂いた高級な感じのメロンで想像してみました!

 

*********************************************************

margin(borderよりさらに外につくる余白)= メロンの化粧箱

border(paddingの外側につくる線)= 皮

padding(コンテンツのすぐ外の余白)= 果肉

コンテンツ(表示させたい内容)= 種の部分

*********************************************************

 

この4つの【コンテンツ】【padding】【border】【margin】の場所がメロンを想像して思い浮かぶようになったら、

なんとなく自分でもCSSを書くことに挑戦してみる気になれました!

そして、思った箇所に余白や線をつくれるようになってきました!!

 

皆様も一度、余白についてメロンで想像してみてください!

 

ちなみに、スイカは種が散らばっていて想像しにくかったです。笑

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

5才児あいらちゃんのママ

ちょっとしたきっかけで、htmlとcssの勉強を始めたばかりの初心者です。 主婦の私には難しく感じるところもたくさんありますが、 私と同じ初心者でhtmlとcssの勉強しているけど疑問をもってらっしゃる方々に 主婦の観点で気付いたことなど、お伝えしていけたら良いなと思っています!