TECH I.S.

CSSのmarginとは？余白の指定方法について

余白は、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。

この要素には70pxの余白があります。



CSSマージン

CSSmarginプロパティは、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。

CSSを使用すると、余白を完全に制御できます。要素の各辺 (上、右、下、左) のマージンを設定するためのプロパティがあります。

Margin - 各サイド

CSSには、要素の各辺のマージンを指定するためのプロパティがあります。

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

すべてのマージンプロパティは、次の値を持つことができます。

  • auto - ブラウザーがマージンを計算します
  • length - 余白をpx、pt、cmなどで指定します。
  • % - 包含要素の幅の%でマージンを指定します
  • inherit - 親要素からマージンを継承することを指定します

ヒント：負の値を使用できます。

例

<p>要素の4つの辺すべてに異なるマージンを設定します。

p {   margin-top: 100px;   margin-bottom: 100px;   margin-right: 150px;   margin-left: 80px; }

Margin - 一括指定プロパティ

コードを短くするために、1つのプロパティですべての余白プロパティを指定することができます。

marginプロパティは、次の個々のmarginプロパティの簡略化されたプロパティです。
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

それでは、これがどのように機能するかです。

marginプロパティに4つの値がある場合

  • margin: 25px 50px 75px 100px;

    • 上のマージンは25px
    • 右のマージンは50px
    • 下のマージンは75px
    • 左のマージンは100px

例

次の4つの値を持つmargin一括指定プロパティを使用します。

p {   margin: 25px 50px 75px 100px; }

marginプロパティに3つの値がある場合

  • margin: 25px 50px 75px;

    • 上のマージンは25px
    • 左右のマージンは50px
    • 下のマージンは75px

例

次の3つの値を持つmargin一括指定プロパティを使用します。

p {  margin: 25px 50px 75px; }

marginプロパティに2つの値がある場合

  • margin: 25px 50px;

    • 上下のマージンは25px
    • 左右のマージンは50px

例

次の2つの値を持つmargin短縮形プロパティを使用します。

p {  margin: 25px 50px; }

marginプロパティに1つの値がある場合

  • margin: 25px;

    • 4つの余白はすべて25pxです

例

marginショートハンドプロパティを1つの値で使用します

p {   margin: 25px; }

auto値

marginプロパティをautoに設定して、コンテナ内で要素を水平方向に中央揃えにすることができます。

要素は指定された幅を取り、残りのスペースは左右の余白に均等に分割されます。

例

margin: auto;を使用

div {   width: 300px;   margin: auto;   border: 1px solid red; }

継承値

この例では、<p class="ex1">要素の左のマージンを親要素(<div>)から継承できます。

例

継承値の使用

div {   border: 1px solid red;   margin-left: 100px; } p.ex1 {   margin-left: inherit; }

すべてのCSSマージンプロパティ

プロパティ

説明
margin 1つの宣言ですべてのマージンプロパティを設定するための簡略プロパティ
margiin-bottom 要素の下のマージンを設定します
margin-left 要素の左のマージンを設定します
margin-right 要素の右のマージンを設定します
margin-top 要素の上のマージンを設定します


チュートリアル