marginとpaddingの使い分けについて

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は余白設定の際に使う
「margin」プロパティと
「padding」プロパティについて
お話させて頂きます。

margin(マージン)プロパティと
padding(パディング)プロパティは
どちらも余白を設定する際に使います。

では、余白を設定したい場合、
どちらを使えば良いでしょうか?

それは、目的によって使うプロパティが変わります。

margin(マージン)プロパティ

margin(マージン)プロパティは、枠の外側の余白を設定する場合に使います。

padding(パディング)プロパティ

padding(パディング)プロパティは、枠の内側の余白を設定する場合に使います。

下記の画像を見て頂けるとイメージしやすいと思います。

yohaku

水色の枠を箱の枠だと思って下さい。
箱の枠内に文章(内容)が表示されていますが、
箱の枠から内側に余白を設定するならpaddingを使います。

箱の外側にピンクの破線で表示されていますが、
外側の余白を設定したい場合はmarginを使うということです。

以前、どこかで見かけたのですが
人の体で例えると、

骨格⇒内容
皮膚⇒枠(border)
筋肉⇒padding
他人との距離⇒margin

と表現されていたのを思い出しました。
いかがでしょうか?
イメージ出来ましたでしょうか?(笑)

今回はmarginとpaddingの使い分けについて
お話させて頂きました。

初心者の方は、最初の内は混乱してしまうかもしれませんが、
実際に設定を行なっていけば、段々理解出来ると思いますので
しっかり覚えるようにしましょう。

今後、marginやpaddingの設定例など
ご紹介出来ればと思っています。

では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ