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

margin-rightプロパティは、HTML要素の右側に配置される外部の余白（マージン）の幅を設定するためのプロパティです。このプロパティを使用することで、指定した要素と右隣にある要素、またはブラウザの端との間に空間を作り、ウェブページのレイアウトを調整できます。

要素の右側に適切な間隔を設けたい場合や、要素の配置を視覚的に整えたい場合に使用されます。例えば、複数の要素を横に並べる際に、それらの間にスペースを設けて読みやすさや視覚的な区切りを明確にしたいときに効果的です。

このプロパティには、いくつかの値を指定できます。ピクセル（px）やem、remといった絶対的または相対的な長さを指定する方法が一般的です。例えば、「margin-right: 20px;」と記述すると、要素の右側に20ピクセルの余白が適用されます。また、親要素の幅に対するパーセンテージで指定することも可能です。「margin-right: 10%;」とすると、親要素の幅の10%が余白として設定されます。

さらに、「auto」という値を指定することもできます。これは、特にブロックレベル要素を水平方向に中央寄せしたい場合に、「margin-left: auto; margin-right: auto;」と組み合わせることで、要素を自動的に中央に配置するために利用されます。負の値を指定することも可能で、その場合は隣接する要素と重なり合うようなレイアウトを作ることもできますが、予期せぬ表示になる可能性もあるため、使用には十分な注意が必要です。このプロパティは、要素の外側の空間を調整するものであり、要素の内側の余白を扱うpaddingプロパティや、要素の境界線を定義するborderプロパティとは異なる役割を持っています。

Copy
1.element {
2  margin-right: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません