CSS マージン

CSS の丸い枠線 CSSマージンの結合
この要素のマージンは 70 ピクセルです。

自分で試してみてください

CSS マージン

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

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

Margin - 別のエッジ

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

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

すべてのマージン プロパティに次の値を設定できます。

  • auto - マージンを計算するブラウザ
  • lengthth - 余白を 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: 25 ピクセル 50 ピクセル 75 ピクセル 100 ピクセル;
    • 上の余白は 25 ピクセルです
    • 右マージンは 50 ピクセルです
    • 下マージンは 75 ピクセルです
    • 左余白は 100 ピクセルです

例

margin 短縮属性は 4 つの値を設定します。

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

自分で試してみてください

margin 属性で 3 つの値が設定されている場合:

  • margin: 25 ピクセル 50 ピクセル 75 ピクセル;
    • 上の余白は 25 ピクセルです
    • 左右の余白は 50 ピクセルです
    • 下マージンは 75 ピクセルです

例

次の 3 つの値を設定して margin 省略表現プロパティを使用します。

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

自分で試してみてください

margin 属性で 2 つの値が設定されている場合:

  • margin: 25 ピクセル 50 ピクセル;
    • 上下の余白は 25 ピクセルです
    • 左右の余白は 50 ピクセルです

例

2 つの値を設定して margin 短縮プロパティを使用する:

p {
  margin: 25px 50px;
}

自分で試してみてください

margin 属性で値が設定されている場合:

  • margin: 25px;
    • 4 つの余白はすべて 25 ピクセル

例

値を設定する margin 短縮属性の使用:

p {
  margin: 25px;
}

自分で試してみてください

auto 値

margin 属性を auto に設定すると、要素がコンテナ内で水平方向の中央に配置されます。

要素は指定された幅を占め、残りのスペースは左右の境界線で均等に分割されます。

例

margin: auto を使用します:

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

自分で試してみてください

inherit 値

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

例

inherit 値の使用:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

自分で試してみてください

CSS の丸い枠線 CSSマージンの結合