cssマージン(margin)の使い方を覚えよう!

マージンの使い方を覚える

cssのマージン(margin)とは、ボーダー(bordr)の外側の余白を設定するためのものです。 マージン(margin)はwebサイトを作る時に必ず使うので、しっかり覚えておくと作る時、すごい楽になります。

このページではマージン(margin)の色々な使い方を紹介してきますね。

目次
ネガティブマージン
ボックスモデルでのマージンの位置

マージン(margin)の設定方法

マージン(margin)は、下のプロパティを使って、上下左右をまとめて指定することができます。 それと個別に指定する事もできます。

marginプロパティ 意味
margin:〇px; 上下左右のマージンをまとめて指定する
margin-top:〇px; 上のマージンを指定する
margin-bottom:〇px; 下のマージンを設定する
margin-left:〇px; 左のマージンを設定する
margin-right:〇px; 右のマージンを設定する

また半角スペースで区切って、上下左右のマージンの値をそれぞれ指定することもできます。

※例として5pxを使っていますが、何pxでも大丈夫です。

使い方 意味
margin:5px; 「上下左右」のマージンが5pxになる
margin:5px 10px; 「上下」が5px、「左右」が10pxのマージンになる
margin:5px 10px 15px; 「上」が5px、「左右」が10px、「下」が15pxのマージンになる
margin:5px 10px 15px 20px; 「上」が5px、「右」が10px、「下」が15px、「左」が20pxのマージンになる

単位について

大抵の場合はpx(ピクセル)という単位を使って、サイズを指定します。

他にもパーセンテージ(%)を使って、ボックスのサイズに対するパーセンテージで指定することができます。 例えば「10%」と指定場合は、ボックスの縦、または横、もしくは両方向のサイズに対して10%の割合でマージンが設定されます。

div{margin:10% 20% 30% 40%;}
/*例としてdivにしましたが、何でも大丈夫です*/

他にもボックスの状況に応じて、自動的にマージンを設定する「auto」というものがあります。

例えば、ボックスの幅を固定して左右のマージンをautoにすると左右のマージンが同じサイズに設定されます。 その結果ボックスがセンタリングされます。

これも使う事が多いので、覚えておくと便利です。

div{margin:auto;}

マージン(margin)の書き方

p{margin-top:10px;}
/*上のマージンが10px*/

p{margin-bottom:10px;}
/*下のマージンが10px*/

p{margin-left:10px;}
/*左のマージンが10px*/

p{margin-right:10px;}
/*右のマージンが10px*/

p{margin:10px;}
/*上下左右のマージンが10px*/

p{margin:5px 10px;}
/*上下が5px、左右が10pxのマージンになる*/

p{margin:5px 10px 15px;}
/*上が5px、左右が10px、下が15pxのマージンになる*/

p{margin:5px 10px 15px 20px;}
/*上が5px、右が10px、下が15px、左が15pxのマージンになる*/

ではマージンが実際にブラウザで表示されると、どうなるか見てみましょう! 分かりやすくするために、p要素にオレンジの背景を付けます。

p{background:#f9cc9d;}

p.example{margin:10px;}
p.example2{margin:5px 20px;}
p.example3{margin:5px 20px 30px;}
p.example4{margin:15px 25px 35px 45px;}
<p class="example">マージン10px</p>
<p class="example2">上下5px、左右20pxのマージン</p>
<p class="example3">上5px、左右20px、下30pxのマージン</p>
<p class="example4">上15px、右25px、下35px、左45pxのマージン</p>
ブラウザ上のマージン表示例

マージン10px

上下5px、左右20pxのマージン

上5px、左右20px、下30pxのマージン

上15px、右25px、下35px、左45pxのマージン

上のブラウザ上のマージン表示例を見て「あれっ?」と思う所ないですか?

縦方向のマージンがちょっと違いますよね。 実はマージンは縦方向で重なるマージンを相殺しているんです。

マージンの相殺

マージンの相殺
<div>
<h1>h1の要素の部分</h1>
</div>
<div>
<h1>h1の要素の部分</h1>
</div>
div{
  margin:15px 15px 40px;
  padding:15px;
  border:solid 5px #ccc;
}
/*margin上15px 左右15px 下40pxという意味
  borderは1本線で太さ5pxで#ccc色という意味*/

例えば上のような場合、上のdivには下方向のマージンが40px下のdivには上方向のdivが15pxが指定されてます。 ですが実際ブラウザに表示されているのは、上のdivに指定されている下方向のマージン40pxのみですよね。

こういうように要素同士が縦に隣接している場合、マージンが重なってどちらか大きい方のマージンが反映されることがあります。 このことをマージンの相殺といいます。

ちなみに左右のマージンは相殺されません。縦方向のみです。

ちょっとややこしいかもしれないですが、そのうち感覚でなれます。 こういうものだと思ってください。

マージンの相殺にはルールというものがあります。 最初の内は覚えなくても大丈夫ですが、一応載せておきますね。

マージンの相殺のルール

  • floatの指定がない場合は、縦方向のマージンが相殺される。
  • 全てのマージンが正の値の場合、最も大きいマージンの値が反映される。
  • マージンとネガティブマージンがある場合、最も大きい値と小さい値の差がマージンとなる。
  • 全てネガティブマージンの場合、絶対値が一番大きいマージンが反映される。
  • 横方向のマージンは相殺されない。
  • フロートのマージンは相殺されない。
  • absoluteなど絶対位置で指定されたボックスのマージンは相殺されない。

一部のルールのみ紹介しました。 詳しくは下記サイトをご覧ください。

8.3.1 Collapsing margins ボックス–CSS 2.1のエッセンス

ネガティブマージン

マージンは正の値以外にも負の値(-)を付ける事もできます。 いわゆる「ネガティブマージン」というものです。

使い方は簡単で、マージンに「-」(マイナス)を付けるだけです。

div{margin:-10px;}

ネガティブマージンの詳しい使い方などについては下のページをご覧ください。

ボックスモデルでのマージンの位置

cssボックスモデルのマージンの位置 実際のマージンの位置

※ボックスモデルについては「cssのボックスモデルについて」で詳しく紹介しています。

マージン(margin)の各位置は画像のようになっています。 上はmargin-top、下はmargin-bottom右はmargin-right、左はmargin-leftとなります。

最初の頃は、paddingとmarginがどっちがどっちかわからなくなります。 というより「どっち使えばいいのだろう??」ってなると思います。 なので、ボーダー(枠線)の外側の余白はマージン、内側の余白はパディング(padding)と覚えて下さい。

あとbackgroundで背景を付けた場合、マージンには被らないので、用途によって使い分けて下さいね。 ちなみに、ボーダーはパディングとマージンの間に表示されます。 なのでボーダーを表示する時は、ボーダーの幅が追加されるので知っておいて下さいね。

マージンの相殺など、色々わけわかんないのが出てきましたが、「マージンはボーダーの外側の余白」とだけ覚えておけば大丈夫です。 マージンとパディングの違いさえ覚えちゃえば、あとは慣れますw あとマージンは相当使う事が多いので、書き方だけは覚えましょうね。 相殺のルールとかはいいので、とりあえず書き方だけ覚えておけば後々楽できますよw

以上「マージン(margin)ついて」でしたー(^^♪ 最後まで読んで頂きありがとうございます!!