【CSS Modules】margin-leftプロパティの使い方

margin-leftプロパティは、CSSのボックスモデルにおいて、要素の左側のマージン（余白）の幅を保持するプロパティです。このプロパティを使用することで、指定した要素の左側と隣接する要素との間に任意の空間を作成し、Webページのレイアウトを調整できます。

設定できる値には、px（ピクセル）、%（パーセンテージ）、em、remなどの様々な長さの単位があります。例えば、margin-left: 20px;と設定すると、その要素の左側に20ピクセルの余白が適用されます。パーセンテージで指定した場合、親要素の幅に対する割合で余白が計算されます。

また、autoというキーワードも指定可能です。特にブロックレベル要素において、margin-left: auto;とmargin-right: auto;を同時に設定すると、利用可能な水平方向のスペースが左右のマージンに均等に分配され、結果として要素が親要素の中央に配置されます。これは、要素を水平方向にセンタリングする際によく用いられる手法です。

負の値を設定することもできます。例えば、margin-left: -10px;とすると、要素は通常の配置位置よりも左側に移動し、他の要素と視覚的に重なる可能性があります。これは特定のデザイン効果を実現するために利用されることがあります。

margin-leftプロパティは、ブロックレベル要素やインラインブロック要素など、ボックスモデルを持つあらゆるHTML要素に適用され、要素間の視覚的な間隔や配置を細かく制御するために不可欠なツールです。正確なレイアウト設計において、このプロパティの理解と適切な利用が求められます。

Copy
1selector {
2  margin-left: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません