CSSのmarginとは？余白の指定方法の基本とpaddingとの違いを解説

「CSS」のmarginとは、「CSS」の余白を指定するプロパティの1つです。
そんなWebサイト作成で大切なプロパティである「CSS」のmarginの意味や使い方、paddingとの違いについて解説します。

「CSS」を学習している方の中には、marginの学習に苦戦している人がいます。marginとは、「HTML」要素の余白を指定するプロパティであり、Webサイトを作成する上でとても大切な要素のひとつです。

身に付けられるまでには少し時間がかかるかもしれませんが、「CSS」を扱うためにはしっかりとマスターしておくことが大切です。本記事では、「CSS」のmarginの意味や使い方、paddingとの違いについて解説します。

CSSのmarginとは？

「CSS」のmarginとは、「HTML」要素の余白を指定するプロパティのことです。主に、要素の外側の余白を指定するときに使用されるプロパティであり、Webサイトのレイアウトを整えることでユーザーの視認性を高められます。

「CSS」でWebサイトのデザインを整える場合、高頻度で使用されるプロパティのひとつです。そのため、「CSS」を扱う方やこれから学習を始める方は、しっかりとマスターしておきましょう。

また、「CSS」のプロパティには、marginと似たpaddingというプロパティもあり、このプロパティもとても重要な役割を持っています。marginと一緒にpaddingもしっかりとマスターするようにしましょう。

CSSのmarginとpaddingの違い

「CSS」で余白を設定するにはmarginとpaddingがあり、それぞれに違いがあります。

marginは、「HTML」要素の外側の余白を指定するプロパティであり、Webサイトのレイアウトを整えたり視認性が向上したりします。

paddingとは、marginと似た効果を持つプロパティで要素の内側の余白を指定します。paddingを指定することで

「CSS」

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    margin:  0 0 0 auto;
}

autoを使って余白を指定する方法も、覚えておきましょう。

CSSのmarginを%で指定する

「CSS」のmarginを%で指定する方法もあります。%で指定する場合は、基本的に上下の余白を決める場合であれば、ほとんど使用しません。一方で、%を使うことで親要素の幅に対する比率が計算されるので、要素の拡大・縮小の設定をする場合にとても便利です。

実際に、親要素の幅(widgh)が決まっている場合は、その親要素の幅を基準にmarginのサイズ変更がおこなわれるので、Webデザインの形状を崩さなくてすみます。

しかし、marginを%で指定する場合、横の%が合計で100％になるようにする必要があるので、使う場合はしっかりと覚えておきましょう。

CSSのmarginが効かない理由とは？

「CSS」のmarginを使っていると、記述しているコードが間違っていないのに反映されない場合があります。そのような時に、何が原因かを調べられれば、スムーズに「CSS」のmarginを反映させられるでしょう。

ここでは、「CSS」のmarginが効かない理由を2つ解説します。

marginが相殺されている

marginが反映されない原因として、まずmarginの相殺が考えられます。

marginの相殺とは、隣り合う2つのブロック要素に各々設定したmarginが重なり合って、片方に設定したmarginの値が機能しなくなることです。

marginは、2つブロック要素に設定した値を足し算するのではなく、値が大きい方が優先されてしまいます。marginが相殺されていると、以下のようなコードになります。

.container {
  margin: 0 auto;
  width: 500px;
}

.block {
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: yellow;
}

.block2 {
  margin-top: 80px;
}

上記の場合、.block1要素のmargin-bottomが50px、.block2要素のmargin-topが80pxのため、.block2要素のmarginが優先されます。そのため、「CSS」のmarginが効かないときは、marginが相殺されていないか確認してみましょう。

インライン要素を対象にしている

インライン要素を対象にしているためmarginが効かないこともあります。

上下のmarginはブロック要素、インラインブロック要素が対象となるので、インライン要素に設定しているを場合確認しましょう。

<span>あいうえお</span>

span {
   /*←上下のmarginは効かない*/
  margin: 50px 0; 
}

以上のように、インライン要素の上下に余白を設定したい場合は、paddingやインライン要素をmarginを設定したブロック要素の中に入れた対応が効果的です。

span {
   /*inline-block要素、もしくはblock要素にする*/
  margin: 50px 0;
  display: inline-block; 
}

インライン要素には、効果のない「CSS」がいくつかあるので、これから「CSS」を学習する方は注意してください。

CSSのmarginをブラウザで確認する方法

「CSS」のmarginの機能が効いているかは、ブラウザの検証機能を使用することで確認できます。エディタ上でコードを正しく記述したと思っていても、実際にmarginが効いているかどうかの判断は難しいです。

しかし、ブラウザに搭載されていれる検証機能を使えば、marginを使った結果、どのようにWebデザインが構成されているか確認できます。

具体的な確認方法は、以下の手順です。

1. Google Chromeのデベロッパーツールを開く
2. デベロッパーツールを開いて「command＋Shift＋c」を押して確認箇所を参照する
3. marginがブラウザ上で確認できたら問題なく動いているか見る

主に以上の手順で、marginをブラウザで確認できます。

CSSのmarginを使うタイミング

「CSS」のmarginは、「HTML」要素の余白を最適なものにし、Webデザインを綺麗に魅せられます。marginを使う主なタイミングは3つです。

• 要素の間に隙間を設けるタイミング
• 要素を右や中央に寄せるタイミング
• 内側の領域の余白を指定するケースには不向きなタイミング

「CSS」のmarginを使うことによって、効果的に余白を設定できます。

要素の間に隙間を設ける

いくつかの要素が並んでいる間に隙間を設ける場合、「CSS」のmarginを使います。要素と要素の間は外側の余白なので、marginで幅のサイズを指定して余白を設けましょう。

要素の間に隙間を設ける場合は、以下のようなコードを記述します。

「HTML」

<div class="margin_test-wrap">
  <div class="margin_test">
       要素の周囲に余白を指定
  </div>
  <div class="margin_test">
       要素の周囲に余白を指定
  </div>
  <div class="margin_test">
       要素の周囲に余白を指定
  </div>
</div>

「CSS」

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
    float:  left;
    margin:  10px;
}

以上のように「HTML」と「CSS」の記述をおこなうことで、要素の間に隙間を設けることができます。

要素を右や中央に寄せる

要素を左側から右や中央に寄せるタイミングでも、「CSS」のmarginを使えます。

「HTML」

<div class="margin_test right_test">
     右寄せ！
</div>
<div class="margin_test center_test">
     中央寄せ！
</div>

「CSS」

.margin_test {
    border: solid 1px;
    width: 200px;
    height:  200px;
    box-sizing:  border-box;
    background-color: #81ff86;
}

.right_test {
    margin: 0 0 0 auto;
}

.center_test {
    margin:  0 auto;
}

上記の書き方はショートハンドと呼ばれ、上下左右のmarginを個別に指定する必要がない場合にまとめて記述する際に使用されます。要素を右や中央に寄せる場合によく使われるためおすすめです。

またmargin: 0 auto;と0を記述していますが、0をなくしmargin: auto;としても問題ありません。古いバージョンのInternet Explorerでは、0を付けないとmarginが効かないため、その名残で今も記述しているコードが多いです。

内側の領域の余白を指定するケースには不向き

「CSS」のmarginは、「HTML」要素の内側領域の余白を指定するケースには不向きなので、そのような場合はpaddingを使うようにします。

paddingであれば、要素の内側の余白を指定することができるので、上記のようなケースでも問題なく動作が可能です。そのため「CSS」を扱う場合、marginのマスターは大切ですが、paddingもしっかりマスターしておきましょう。

paddingもマスターしていれば、上記のようなケースやその他要素の内側の余白を指定する場合に効果的です。

CSSのmarginの使い方を把握して自由にレイアウトを設定しよう

「CSS」のmarginは、Webサイトのレイアウトを決めたり、ユーザーのサイト視認性を向上させたりと大切なプロパティのひとつです。「CSS」を学習し始めた方の多くは、marginの習得に苦戦する方も多いですが、しっかりとマスターすれば自由にレイアウトを設定でき利便性が高いです。

そのため、これから「CSS」のmarginを扱う方や学習し始める方は、ぜひ本記事を参考にして効果的に使えるようにしておきましょう。