【CSS Modules】margin省略形プロパティの使い方
margin省略形プロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
marginプロパティは、要素の周りに設定される外側の余白（マージン）に関する値を保持するプロパティです。これは特に、margin-top、margin-right、margin-bottom、margin-leftといった個別のマージン設定プロパティを一括で定義できるショートハンドプロパティとして機能します。要素の境界線（ボーダー）の外側に位置する透明な空間であり、他の要素との間隔を調整し、ウェブページのレイアウトを決定する上で非常に重要な役割を果たします。
値を指定する方法は複数あり、指定する値の数によって適用される方向が変わります。例えば、一つの値を指定すると、その値は上下左右すべてのマージンに適用されます。二つの値を指定した場合、最初の値は上下のマージンに、二番目の値は左右のマージンに適用されます。三つの値を指定すると、上、左右、下という順序で適用され、四つの値を指定すると、上、右、下、左の順に時計回りに個別のマージンが設定されます。
また、autoキーワードを使用することで、ブロックレベル要素を水平方向の中央に配置するといった高度なレイアウト調整も可能です。このプロパティを適切に利用することで、ウェブサイトやアプリケーションの視覚的な構造を正確に制御し、ユーザーにとって使いやすいインターフェースを実現できます。システムエンジニアを目指す方にとって、CSSのレイアウトを理解し、効率的に構築するためにmarginプロパティの習得は不可欠です。
公式リファレンス: margin
構文(syntax)
1margin: 10px 20px 30px 40px;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません