【HTML初心者】marginの使い方|余白はこれでキレイに作ろう!
  • facebookページ
  • twitterページ
  • 2020.03.16

    【HTML初心者】marginの使い方|余白はこれでキレイに作ろう!

    marginとは

    marginとは、要素の4辺(上下左右)の間隔・マージン領域を設定するプロパティのことです。

    要素間の間隔をとりたいときに使われます。

    要素に背景色や画像を設定すると、その要素は枠の内側に適用されます。

    マージン領域は透過色となり背景は付きません。

    marginとpaddingの違いは?

    marginとpaddingの違いは次の通りです。

    • margin:要素の外側の余白を設定
    • padding:要素の内側の余白を設定

    marginとpaddingの違いは?

    paddingについては次の記事で詳しく解説しています。

    【関連記事】

    ▶︎paddingで余白の取る方法!HTMLで読みやすい文書を作ろう

    marginの書き方・使い方

    ここからmarginの書き方・使い方を次の2通り説明します。

    1. marginを上下左右まとめて指定
    2. marginを上下左右個別に指定

    1.marginを上下左右まとめて指定

    marginを上下左右まとめて指定するには、次のように記述します。

    これで上下左右に100pxの余白が設定されます。

    その他、値の書き方によって指定する箇所ごとに余白を設定することも可能です。

    では、サンプルで余白のとり方を確認してみましょう。

    ■HTML

    ■CSS

    ■表示結果

    1.marginを上下左右まとめて指定

    2.marginを上下左右個別に指定

    marginは「上だけに余白をつける」といった上下左右個別に設定することも可能です。

    個別に指定する場合は、それぞれ次のように記述します。

    サンプルコードで余白のとり方を確認してみましょう。

    ■HTML

    ■CSS

    ■表示結果

    2.marginを上下左右個別に指定

    marginの値の指定方法

    marginの値の指定方法は「数値+単位」か「%(パーセント)」になります。

    %の場合は、親要素の幅に対する比率になることに注意しましょう。

    サンプルで確認してみましょう。

    ■HTML

    ■CSS

    ■表示結果

    marginの値の指定方法

    box1の右端が見切れてしまっています。

    左右の%の合計は100にしなければいけませんが、borderの太さは%で指定できないためレイアウトが崩れてしまう場合があります。

    borderを使う際はこのようなレイアウト崩れにも注意しましょう。

    margin autoの使い方(要素を左右中央寄せ)

    marginで指定する「auto」は、自動で余白を調整するプロパティです。

    marginの左右にautoを指定すると、左右中央寄せで表示できます。

    サンプルコードで見てみましょう。

    ■HTML

    ■CSS

    ■表示結果

    margin autoの使い方(要素を左右中央寄せ)

    margin 0 autoが効かない時に確認したいこと

    margin 0 autoを指定したのに、中央寄せにならないという経験はありませんか?

    そんな時はwidthプロパティが指定されているかどうか確認してみましょう。

    marginを指定したいブロック要素にwidthの指定が場合、親要素の100%のサイズになります。

    よって、親要素と同じサイズになってしまっていては、margin 0 autoを指定しても中央寄せにはなりません。

    ■HTML

    ■CSS

    ■表示結果

    margin 0 autoが効かない時に確認したいこと

    marginの相殺

    marginの相殺とは何ですか?

    並んでいる要素のそれぞれにmarginが指定されていると、1つしか適用されない現象のことを「marginの相殺」と言います。

    サンプルコードでmarginの相殺を見てみましょう。

    ■HTML

    ■CSS

    ■表示結果

    marginの相殺

    デベロッパーツールで確認するとわかりやすいですが、box1のmargin指定が打ち消されているのがわかります。

    まとめ

    HTMLのmarginについて解説しました。

    marginやpaddingといった余白の指定は、Webサイト制作などでは必須の知識です。

    ぜひ、この記事を参考にmarginの使い方を覚えてください!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE