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

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を学びます。 HTML、CSSは、マークアップ言語と呼ばれる言語 ...

続きを見る

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

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

今回の記事はそんな悩みを持っている人に向けた記事です。 2019年に実は、プログラミングスクールをまとめた記事を書きましたが、あくまで2019年に存在していたプログラミングスクールで僕が調べることがで ...

続きを見る

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

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

今回はこのような疑問をお持ちの方に向けた記事です。 僕は、新卒で塾講師をしていた過去があり、当時、肉体的にも負担のある講師の仕事を続けていくことに不安を感じていました。 また、塾業界自体、勤務時間の割 ...

続きを見る

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

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

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

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

  • この記事を書いた人
てぃかし プロフィール画像

てぃかし

当ブログの運営責任者。 エンジニア、プログラマー、YouTuber、ブロガー、Webマーケター。 1987年生まれ。 滋賀県出身。 同志社大学 工学部 エネルギー機械工学科 卒業。 滋賀に18年、京都に4年、大阪に3年半、東京に7年ほど移り住む。 その後、滋賀に戻り、これまでの経験をもとにフルリモートで様々な仕事をこなしている。 経験した仕事は、数学の塾講師、マーケティングコンサルタント、エンジニア、SEOコンサルタント。個人では、ブログ運営、YouTubeの企画・撮影・動画編集を1人で行なっている。 YouTubeでは主にプログラミングスクールの体験談やエンジニア転職の方法を実体験をもとに配信することから始め、人生で役立つハウツーを発信。 blogでは、YouTubeでは話さない役立つ内容やお得情報を執筆。 プログラミングスクール「テックキャンプ」のアンバサダーに認定され、テックキャンプアンバサダーとして、テックキャンプ関連の情報発信や相談も行なっている。

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