文章を枠で囲んだ時のpaddingとmarginの違いがわからん

CSSで、paddingとmarginの違い、わかりにくいですよね。ここにちゃんと書いておこうと思います。

ららです。



記事の中で、こんなふうに文章を囲みたい!とします。

WS008912

ググってサンプルを元にCSSを書くんだけど、
paddingとmarginの違いが、いつまでたってもわからんのです (;´Д`)

ここにちゃんと書いとこうと思います。



paddingはここだ!

paddingが15pxの場合

WS008913
↓ ↓ ↓
WS008912

えっ、どこが15px??


paddingが100pxの場合

WS008914
↓ ↓ ↓
WS008915

ここだった~~~(・∀・)



marginはここだっ

marginが20pxの場合

WS008916
↓ ↓ ↓
WS008919

えっえっ?どのへんが20px?


marginが100pxの場合

WS008918
↓ ↓ ↓
WS008921

ここだった~~(# ゚Д゚)



以上、視覚的にわかっていただけたかと。
私も何かとここを見返そうと思います^^;


この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

コメントを残す

サブコンテンツ

このページの先頭へ