CSS では、 marginプロパティは要素の周囲にスペースを作成するために使用されます。 marginプロパティはさまざまな形式の値を受け取ることができるため、要素の各辺 (上、右、下、左) に異なる量のスペースを指定できます。

marginプロパティの基本的な構文は次のとおりです。

 css
 selector {
  margin: top right bottom left;
}

マージンは、ピクセル ( px )、ems ( em )、rems ( rem )、パーセンテージ (%) などのさまざまな単位で指定できます。いくつかの例を次に示します。

1. すべての辺に同じマージンを設定する:

    css
    .example {
     margin: 10px;
   }
   

2. 各辺に異なるマージンを設定する:

    css
    .example {
     margin-top: 5px;
     margin-right: 10px;
     margin-bottom: 15px;
     margin-left: 20px;
   }
   

3. さまざまな値の短縮表現を使用する:

    css
    .example {
     margin: 5px 10px 15px 20px;
   }
   

   この省略表現の順序は、上、右、下、左です。

4. マージンをパーセンテージで設定する:

    css
    .example {
     margin: 2% 5%;
   }
   

   この例では、上マージンは要素の高さの 2%、右マージンは要素の幅の 5% です。

5. 自動マージン:自動マージンを使用して、ブロックレベル要素をコンテナ内で水平方向に中央揃えにすることができます。

    css
    .center {
     margin-left: auto;
     margin-right: auto;
   }
   

これらは単なる基本的な例であり、特定のレイアウトのニーズに基づいて余白をカスタマイズできることに注意してください。要素に必要な間隔を実現するには、さまざまな値と単位を試してください。