CSS マージン

この要素には70pxのマージンがあります。

CSSのマージンプロパティは、要素の周囲にスペースを作成するために使用されます。これにより、定義されたボーダーの外側にスペースが作られます。

CSSを使用すると、マージンを完全に制御できます。要素の各側面（上、右、下、左）のマージンを設定するプロパティがあります。

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

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

ヒント: 負の値も使用できます。

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

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

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

marginプロパティは、以下の個々のマージンプロパティのショートハンドプロパティです：

以下はその動作方法です：

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

margin: 25px 50px 75px 100px;

4つの値を持つマージンショートハンドプロパティを使用します：

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

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

margin: 25px 50px 75px;

3つの値を持つマージンショートハンドプロパティを使用します：

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

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

margin: 25px 50px;

2つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px 50px;
}

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

margin: 25px;

1つの値を持つマージンショートハンドプロパティを使用します：

p {
  margin: 25px;
}

要素をコンテナ内で水平に中央に配置するために、marginプロパティをautoに設定できます。

要素は指定された幅を取り、残りのスペースは左右のマージン間で等しく分割されます。

margin: autoを使用します：

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

この例では、<p class=”ex1″>要素の左マージンが親要素(<div>)から継承されます：

inherit値の使用：

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

p.ex1 {
  margin-left: inherit;
}

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