CSS

marginとpaddingの違い|ボックスモデルの話

今日は、コーディング初心者の方が混乱しがちなmarginとpaddingの違いについてお話させていただきます。

marginとpaddingの違い

marginとpaddingの違いというのは、結論から言ってしまうと、

padding: 内側の余白
margin: 外側の余白

ということです。

すべてのHTMLの要素はボックスと言われる四角形の領域を持っています。四角形の四辺には、borderという境界線があります。その境界線の外側に余白を設けたいときは「margin」境界線の「内側」に余白を設けたいときは「padding」を指定します。

具体例でお話していきます。例えば、ここに数字の入ったdiv要素が横に並んでいたとします。

111111111111111111111111111111
222222222222222222222222222222
333333333333333333333333333333

ここに境界線を引いてみます。

111111111111111111111111111111
222222222222222222222222222222
333333333333333333333333333333

はい、黒い境界線(border)ができました。
この境界線の外側、つまりボックス同士の間に余白を設けたいときはmarginを設定します。
実際に、marginを設定して余白を入れてみましょう。

111111111111111111111111111111
222222222222222222222222222222
333333333333333333333333333333

marginによってボックス同士の間隔が空きました。今後は、ボックス内の数字がborder(境界線)に近づきすぎているので、数字と境界線の間に余白を設けたいと思います。内側の余白はpaddingを設定するんでしたね。

111111111111111111111111111111
222222222222222222222222222222
333333333333333333333333333333

これで、文字が詰まった感じがなくなりましたね。
最後に図解で見てみましょう。

外側がmarginだよ

内側がpaddingだよ

コンテンツ領域だよ。

このようにボックスの境界線とその周りの余白の構造のことをボックスモデルと言います。コーディングをするで、marginとpaddingを使わない日はないと思います。今のうちにしっかりと覚えてしまいましょうね。

最近の記事

  1. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP