CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmarginプロパティとは？使い方とサンプルコードを解説

marginプロパティは、HTML要素の周囲にある余白（スペース）を定義するためのCSSプロパティです。要素とその外側にある他の要素との距離を調整する際に使用され、レイアウトの基本となる重要なプロパティの一つです。

また、marginには負の値（マイナスの値）を指定することもできます。負の値を設定すると、隣接する要素同士の余白が縮まり、コンテンツを意図的に重ねて表示することも可能です。

さらに、marginはショートハンド（省略記法）プロパティであり、複数のマージン関連プロパティ（margin-top・margin-right・margin-bottom・margin-left）を、たった1つの宣言でまとめて設定できます。

marginの値の指定方法

marginプロパティに指定する値の数によって、適用される方向が変わります。

  • 値が1つの場合：上下左右すべてのマージンに同じ値が適用されます（例：margin: 20px;）
  • 値が2つの場合：1つ目が上下、2つ目が左右に適用されます（例：margin: 10px 5px;）
  • 値が3つの場合：上、左右、下の順に適用されます（例：margin: 10px 5px 15px;）
  • 値が4つの場合：上・右・下・左の順（時計回り）に適用されます（例：margin: 10px 5px 15px 20px;）

使用例

次のコードを実行すると、marginプロパティによるマージン設定の動作を確認できます。

<html>
   <head>
   </head>
   <body>
      <p style = "margin: 20px; border:2px solid yellow;">
         上下左右すべてのマージンが20pxになります
      </p>
      <p style = "margin: 15px 4% -10px; border:2px solid red;">
         上マージンは15px、左右のマージンはドキュメント全体の幅の4%、
         下マージンは-10pxになります
      </p>
   </body>
</html>

この例では、最初の段落（黄色い枠線）には4方向すべてに20pxのマージンが適用されます。一方、2番目の段落（赤い枠線）では、上に15px、左右に親要素の幅の4%、そして下に-10px（負の値）が指定されており、下方向に要素が引き寄せられて表示されることが確認できます。


  1. CSSのmargin:autoの役割とは？要素を水平方向に中央揃えする方法

    margin: auto とは何か CSSの margin プロパティに値 auto を指定すると、ブロックレベル要素を親コンテナ（包含ブロック）内で水平方向に中央揃えすることができます。これは、左右のマージンに対して利用可能な余白が自動的に均等に分配される仕組みによるものです。 なお、margin: auto を正しく機能させるには、対象の要素に明示的な幅（width）を設定する必要があります。幅が指定されていない場合、ブロック要素はデフォルトでコンテナの全幅を占めるため、中央揃えの効果は現れません。 コード例 以下のコードを実行して、margin: auto の実際の動作を確認してみまし

  2. CSSのmarginプロパティでinheritを指定して親要素からマージンを継承する方法

    CSSのmarginプロパティに「inherit」という値を指定すると、親要素に設定されているマージンの値を子要素が引き継ぐことができます。通常、marginプロパティは親から子へ自動的に継承されないプロパティですが、margin: inherit; を明示的に指定することで、親要素と同じマージン値を強制的に適用できます。以下のコードは、div要素に設定された左マージン（50px）を、内包するp要素がinheritによって継承する具体例です。実際にブラウザで実行して動作を確認してみてください。サンプルコード<!DOCTYPE html> <html>   &n