プログラミング エンジニア

CSSのmarginとpaddingの使い分けと違い・効かない原因をわかりやすく解説

CSSのmarginとpadding

  • CSSのmarginとpaddingってどうやって使い分けるの?
  • marginとpaddingの違いって何?
  • marginやpaddingが効かない原因って何がある?

今回はこのような疑問を持っている人向けの記事です。

どうも!現役でコーディングをしている てぃかし です。

CSS初心者は、marginとpaddingの使い分け・違いをよくわからないまま学習を進めがちです。

僕もCSSを学んだばかりの頃は、margin、paddingの意味は理解していましたが、どういう時にmargin、paddingを使うのかがはっきりしないまま使っていたことがあります。

よくわからないことを適当に使っていると、気持ち悪いのですが、課題を完了させるために、

「ここはよくわからんけど、paddingで余白を作っておけばいいでしょ!」

とか適当に考えて済ませていたこともあります。笑

でも、それは危険な考え方です。

margin、paddingの違いをしっかり理解しておかなければ、Webサイトの修正が適切に対応できなかったり、想定外の箇所で余白ができてしまったりします。

どっちを使っていいか自分の中で明確でないと、コーディングのスピードも遅くなってしまうでしょう。

ということで、今回は、marginとpaddingの違いや使い分けはもちろん、CSSが効かない時の原因のパターンもまとめて解説します。

margin、paddingの使い分けがしっかりできると、学習も仕事も楽しくなります。逆にあまり理解できていないとストレスが溜まります。

この記事を読むことで、marginとpaddingの使い分けはしっかり理解できるようになるので、ぜひ参考にしていただけたらと思います。

CSSのmarginとは

CSSにおけるmargin(マージン)とは、サイト内の要素の外側の余白を設定するCSSのプロパティです。

プロパティとは、CSSの下記の部分のことです。

CSSプロパティ

HTML

<section>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</section>

CSS

.box1 {

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

.box2 {

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

.box3 {

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

section {

background-color: gray;

}

marginを使わないと赤いブロックはこのような位置になります。CSS

.box2のCSSにmarginを追記します。

CSS

.box1 {

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

.box2 {

margin: 10px;

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

.box3 {

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

section {

background-color: gray;

}

すると、下記のように2つ目のブロックの外側に10pxの余白ができました。

margin

要素の上、下、左、右だけにmarginを適用したいなら、margin-top、margin-bottom、margin-left、margin-rightを使います。

Google Chromのデベロッパーツール(検証)で確認すると下記のようになっています。(デベロッパーツールは画面上で右クリックして「検証」を選択したら表示されます。)

marginとデベロッパーツール

CSSのpaddingとは

CSSにおけるpadding(パディング)とは、サイト内の要素の内側の余白を設定するCSSのプロパティです。

先ほどのCSSのmarginの部分をpaddingにしてみます。

CSS

.box2 {

padding: 10px;

background-color: red;

border: solid 3px black;

height: 100px;

width: 100px;

}

padding

box2だけ大きくなったように見えますね。

しかし、実はbox2は大きくなってはなくて、内側に余白が10pxできたことによって、そう見えています。

Google Chromのデベロッパーツール(検証)でbox2の要素を調べてみるとそのことがよくわかります。

paddingとデベロッパーツール

box2の大きさはは変わってないのですが、paddingによって内側が広がり、赤色の領域が増えたということです。

marginとpaddingの違い

margin、paddingの意味をしっかりと理解していれば、違いはもうお分かりだと思います。

marginは、要素の外側に余白を作り、

paddingは、要素の内側に余白を作ります。

背景も要素も同じ色であれば、違いがわかりにくいのですが、背景と要素の色が異なれば、上記の例のようにわかりやすい違いが見た目でも確認できます。

あと、marginはマイナスの値を設定することができますが、paddingはできません。(マイナスを設定するとCSSが無効になります。)

margin: -10px; とすると下記のようになります。

marginマイナス

marginとpaddingの使い分け

違いがわかっても、それを適切に使い分けることができなければ意味がないですよね。

margin、paddingを使うときの目的は、

「余白を空ける」

ということでしょう。

では、paddingではなく、marginを使うのは、どんな時でしょう?

それは、

「要素の外側に余白を作りたいとき」

です。

marginではなく、paddingを使うのは、どんな時でしょう?

それは、

「要素の内側に余白を作りたいとき」

です。

当たり前かもしれませんが、これ以上の説明はありません。これ以上説明すると、かえってわかりにくくなります。

あとは目で見て理解するのが良いです。

次の例を見ると、理解できると思います。

box2の中に文字を入れました。

marginを使うと下記のようになります。

margin要素の中に文字

paddingを使うと下記のようになります。

padding要素の中に文字

使い分けは、

要素の外側に余白をつけて、要素の位置を調整したいなら、margin

要素の内側にある文字などと距離を空けたいなら、padding

としましょう。

とはいえ、余白が空けるという目的が達成できたら良いので、使い分けの捉え方は人によって違うこともあります。

親要素と子要素の余白はpaddingを使い、

同じ階層の隣り合った要素の余白はmarginを使うと捉えている人もいます。

どのように余白を設定するかは、自分の中で、もしくはチームで決めておくと良いでしょう。

marginとpaddingの種類

marginとpaddingにはどこに余白を作るかで種類が分かれています。

box2にmarginを適用させてみます。

margin-top

margin-top: 10px;

margin-top

要素の上に余白ができます。

margin-right

margin-right: 10px;

本来なら右側に余白ができるのですが、すでに余白があるので、この場合は変化はなしです。

margin-right

margin-bottom

margin-bottom: 10px;

margin-bottom

要素の下に余白ができます。

margin-left

margin-left: 10px;

margin-left

要素の左に余白ができます。

padding-top

padding-top: 20px;

padding-top

見た目上は、box2が縦に長くなっています。

padding-right

padding-right: 20px;

padding-right

box2が右にボコッと飛び出た形となります。

padding-bottom

padding-bottom

見た目上は、padding-topと同じですが、デベロッパーツールで確認すると、要素の下部分が長くなっていることがわかります。

padding-left

padding-left

見た目上は、padding-rightと同じですが、デベロッパーツールで確認すると、要素の左部分が長くなったことによって、右側がボコッと飛び出た形となっています。

marginとpaddingの4つの値

これまで、top、right、bottom、leftを紹介しましたが、1行で設定する書き方があります。

margin、paddingのプロパティは、4つの値を設定することができます。

例えば、

margin: 10px 20px 30px 40px;

こうすると、topは10px、rightは20px、bottomは30px、leftは40pxになります。

margin: 10px 20px;

このように2つだけ値を書くと、topとbottomは10px、rightとleftは20pxとなります。

marginが効かない原因

marginを使っても思った通りに余白が空かないことがあります。

その原因はブロックレベル要素ではなく、インライン要素に対してmarginを使っているということが大半です。

ブロックレベル要素、インライン要素の具体例は後述します。

paddingが効かない原因

paddingを使っても思った通りに余白が空かないことがあります。

その原因も、marginと同じく、ブロックレベル要素ではなく、インライン要素に対してpaddingを使っていたということが大半です。

ブロックレベル要素とインライン要素の一覧

ブロックレベル要素、つまり、marginが効くのは下記の要素です。

  • <div>
  • <center>
  • <fieldset>
  • <blockquote>
  • <form>
  • <noscript>
  • <h1>-<h6>
  • <address>
  • <p>
  • <pre>
  • <ul>
  • <ol>
  • <dl>
  • <dir>
  • <menu>
  • <table>
  • <hr>
  • <isindex>
  • <noframes>

インライン要素、つまりmarginが効かないのは下記の要素です。

  • <a>
  • <abbr>
  • <acronym>
  • <applet>
  • <b>
  • <basefont>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <cite>
  • <code>
  • <dfn>
  • <em>
  • <font>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <kbd>
  • <label>
  • <map>
  • <object>
  • <q>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <small>
  • <span>
  • <strike>
  • <strong>
  • <sub>
  • <sup>
  • <textarea>
  • <tt>
  • <u>
  • <var>

「margin: 0 auto;」はよく使う

marginは、要素を真ん中に位置させたい時にも使います。

margin: 0 auto;

これを使うと、左右の余白が均等になり、要素が真ん中に位置されます。

margin: 0 auto;

よく使うので覚えておきましょう。

ちなみにpadding: 0 auto; は何も起こりません。

まとめ

今回は、marginとpaddingの違い、使い分けについて解説しました。

初心者の方は、意味はわかったつもりでも、実際どう使い分けるのかがわからない人が多いと思います。

実際使ってみることで自分の中に落とし込まれるので、本記事を参考にしつつ、margin、paddingを使用してみてください。

お気に入り登録して、いつでも見れるようにしておくことをお勧めします。

HTML、CSSをしっかり勉強したい人は、「HTML&CSSとWebデザイン入門講座」で勉強するのも良いです。下記の記事で要点をまとめているので、ご覧ください。

初心者向け要約!HTML&CSSとWebデザイン入門講座をエンジニアが解説
【初心者学習】要約!HTML&CSSとWebデザイン入門講座本をエンジニアが解説

HTML&CSSとWebデザインを勉強したい。 HTML&CSSとWebデザイン入門講座ってどうなの? 学習内容は、実務で役立つ? 今回はこのような疑問を持っている人向けの記事です。 どうも!書籍「H ...

続きを見る

CSSを勉強するなら、プログラミングスクールで効率良く学習するのもありです。 CSSが学べるスクールは下記の記事でも紹介しています。

プログラミングスクールまとめ
未経験エンジニアのためのプログラミング&デザインスクールまとめ一覧

プログラミング学習をしたい人 プログラミングの勉強を始めたい。 エンジニア転職もしたい。 色んなプログラミングスクールがあるけど、どのスクールが良いのかな? 違いはなんだろう? 今回の記事はそんな悩み ...

続きを見る

これからエンジニア転職しようと考えている人は、エンジニアロードマップの記事もご参考ください。

【初心者必見】プログラミング学習前にやることは?【エンジニアロードマップ①】
【初心者必見】プログラミング学習前にやることは?【エンジニアロードマップ①】

将来、高収入でリモートもできそうな仕事をしたい。 IT系のエンジニアってどうなのかな? エンジニアになるには何から始めたらいいのだろう? 独学でいいのかな?プログラミングスクールは通うべき? 今回はこ ...

続きを見る

YouTubeもやっています!エンジニア関連の動画は下記からご覧ください。

エンジニア系動画はコチラ

YouTubeでも役立つ情報を配信しています!

ボタンをクリックしてチャンネル登録お願いします!

-プログラミング, エンジニア
-, , , , , , , ,

© 2022 てぃかしのブログ Powered by AFFINGER5