marginとpaddingや borderの使い分け

CSSの中でmarginとpaddingがありますが皆さんは詳しく説明できますか？

カンタンにいえば、箱の外側に余白を取る方を

「margin」

箱の内側に余白を取る方を

「padiing」

箱の境界線の幅や色を変更できるのを

「border」

と、なりますがもっとわかりやすく、
具体的にイメージが浮かばない人のために詳しくみていきましょう。

こちらをご覧ください

出典　4ki4.cocolog-nifty.com

今回の例でwidthで指定した幅というのは、コンテンツ（内容）にあたります。その「border」の内側で幅を「margin」、外側を「padding」と覚えましょう。