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

margin-topプロパティは、CSSのボックスモデルにおいて、要素の境界線の外側にある余白領域のうち、上側の領域の大きさを保持するプロパティです。このプロパティは、Webページ上の要素とその上にある他の要素、または親要素の上端との間にどれくらいのスペースを設けるかを制御するために使用されます。

具体的には、要素の外側の上方向の余白（マージン）のサイズを決定します。指定できる値の種類は多岐にわたり、ピクセル（px）、em（em）、rem（rem）といった単位を用いた具体的な長さ、親要素の幅に対する割合を表すパーセンテージ（%）、またはブラウザに自動で計算させるキーワードautoなどがあります。例えば、margin-top: 20px;と指定すると、要素の上側に20ピクセルの余白が追加されます。また、margin-top: 5%;と指定した場合は、親要素の幅の5%が上マージンとして適用されます。

負の値を指定することも可能で、その場合、要素が通常の配置位置よりも上方向に移動したり、要素間の重なりを発生させたりする効果を得られます。ただし、負のマージンの使用はレイアウトに予期せぬ影響を与えることもあるため、慎重な検討が必要です。このプロパティは親要素から子要素へは継承されず、各要素に対して個別に設定する必要があります。Webサイトのレイアウトを調整し、要素間の適切な間隔を確保することで、視覚的に整理された見やすいページを作成するために不可欠なプロパティです。

Copy
1selector {
2  margin-top: 16px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません