TECH I.S.

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


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


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

自分で試してみる »



CSSマージン

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

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


マージン - 個々の側

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

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

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

  • auto - ブラウザーがマージンを計算します
  • 長さ - 余白を 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 要素の上のマージンを設定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細