CSSでmarginが効かない原因と対処法【初心者向け】現役Webデザイナーが解説

CSSでmarginが効かない原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• marginが効かない原因
• 実際に書いてみよう
• この記事を監修してくれた方
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

marginが効かない原因

よくあるmarginが効かない場合にはいくつかの原因が考えられます。まずは、CSSのボックスモデルを確認しおきます。

1つのボックスには、上下左右に2種類の余白があります。

• padding：内側の余白
• margin：外側の余白

marginは隣接するボックス同士の間隔です。

人間で言うところのソーシャルディスタンスです。

paddingは内側の余白で、ボックスの内部という扱いになります。

実は、marginはボックスがブロックレベル要素なのか、インライン要素なのか、インラインブロック要素なのかによって、振る舞いが変わります。

どう変わるのか、実際に書いて検証していきます。

 

実際に書いてみよう

ブロックレベル要素、インライン要素、インラインブロック要素、それぞれの要素に対して、同じpadding、同じmarginを適用して確認してみます。

 

HTML：

<p>ブロックレベル要素</p>
<div class="box block">Box</div>
<div class="box block">Box</div>
<div class="box block">Box</div>
<div class="box block">Box</div>
<div class="box block">Box</div>

<p>インライン要素</p>
<div class="box inline">Box</div>
<div class="box inline">Box</div>
<div class="box inline">Box</div>
<div class="box inline">Box</div>
<div class="box inline">Box</div>

<p>インラインブロック要素</p>
<div class="box inline-block">Box</div>
<div class="box inline-block">Box</div>
<div class="box inline-block">Box</div>
<div class="box inline-block">Box</div>
<div class="box inline-block">Box</div>

CSS：

.box{
  background:gold;
  padding:1em;
  margin:1em;
  border:black 1px solid;
}
.inline{
  display:inline;
}
.inline-block{
  display:inline-block;
}

表示結果：

paddingとmarginを上下左右に1emを適用したボックスを5つずつ並べてみました

それぞれの要素に対してmarginがどのように適用されているのか表示結果を観察してみてください。

 

ブロックレベル要素の場合

ブロックレベル要素は横幅を指定しない場合、親要素いっぱいまで伸びる性質があります。

そのため、ひとつのボックスの横幅が他の要素に比べて長くなっています。

また、ボックスは横に並びませんので、ボックスは上から下に間隔をあけて並んでいます。

ここで注目して欲しいのが、インラインブロック要素と見比べた場合に、上下のボックスの間隔が狭くなってるところです。
これはmarginの相殺が起こるためです。

ボックスのmargin-top 1em + margin-bottom 1em = 2em の間隔ができるような気がするのですが、実際にはボックスとボックスの間隔は1emになります。

marginが効いていない！と思ってしまいがちなのですが、隣接するブロックレベル要素のmarginは重なり合って、結果的に大きい方の値が適用されるというふうに思っておくと良いです。

 

インライン要素の場合

インライン要素は本来文章の一部として扱われるような要素で、marginの上下は適用しても他の要素との間隔を作ることができません。

インライン要素の大きさは、中にあるテキスト（文字）などの量やサイズ、行の高さなどによって変化し、CSSでwidthやheightも適用することができません。

インライン要素はあくまでも文章の一部として扱いたいような場合に使用して、他の要素との間隔を作りたい場合や、ボックスとして表現したい場合には、インライン要素以外にするのがよいです。

例えば、<a>タグを使ってリンクのボタンを作る場合などは、display: inline-block; や display: block; を適用します。

また、インライン要素中央に配置したい場合には、左右に余白を作るという考え方ではなく、文章を中央揃えで表示するという考え方になります。

そのため、中央に表示したいインライン要素の親要素に対して、行の中央揃え（text-align: center;）を適用します。

インラインブロック要素の場合

インラインブロック要素は、インライン要素とブロックレベル要素の中間のような存在です。

幅や高さを持った要素ですが、ブロックレベル要素とは違って、ボックスの幅な中のテキストの幅に合わせて変化します。

また、要素は横に並んでいく性質があり、marginは上下左右に適用されています。

ただし、ブロックレベル要素を中央に配置したい場合などに使用する margin: auto; は適用できません。

インラインブロック要素を中央に配置したい場合は、インライン要素の時と同様に、親要素にtext-align: center; を適用して中央に配置します。

また、ブロックレベル要素に比べて、上下の間隔が広くなっていることからも分かるように、marginの相殺は起こりません。

 

marginはコーディングでとてもよく使うプロパティです。

要素の種類によって振る舞いが変わったりするので、はじめはわかりにくいプロパティでもあります。

特性をしっかり理解しておくとよいでしょう。

 

[PR] Webデザインで副業する学習方法を動画で公開中

この記事を監修してくれた方

橋本真理 web/グラフィックのデザイナー 会社・店舗等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動しています。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！