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

初心者向けにCSSでmarginが効かない原因について解説しています。marginは要素と要素の間隔を指定するプロパティですが、インライン要素にはmarginを指定することが出来ません。どのような場合に効かないのか確認しておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSでmarginが効かない原因について解説します。

目次

 

marginが効かない原因

よくあるmarginが効かない場合には、いくつかの原因が考えられます。

まずは、CSSのボックスモデルを確認しおきます。

CSSボックスモデル

 

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

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

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

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

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

 

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

ブロックレベル要素、インライン要素、インラインブロック要素、それぞれの要素に対して、同じ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;
}

表示結果

marginが効かない原因

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

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

 

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

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

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

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

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

これはmarginの相殺が起こるためです。

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

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

marginが効かない原因

 

インライン要素の場合

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

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

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

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

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

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

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

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

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

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

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

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

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

 

marginが効かない原因

 

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

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

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

 

執筆してくれたメンター

大堀 翔一郎(おおほりしょういちろう)

IT商社にてコーポレートサイト、ブランドサイトのディレクター兼デザイナー兼コーダー。

大学卒業後、Web制作会社にでデザイナーとして入社し、大手企業のサイト制作やブランドサイトの制作に携わってきました。

 

大石ゆかり

内容が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。