CSS マージンの負値における基本原則
CSS のボックスモデルにおいて、マージン（margin）は要素の境界外側への空間を定義するプロパティです。通常は正值を設定して要素間に隙間を作りますが、負の値を指定することで要素を重ねたり、レイアウトの制約を超えた配置が可能になります。マージン領域自体は描画されませんが、要素間の距離を決定する重要な境界線として機能します。
負のマージンが適用されると、まずマージンボックスの境界が移動し、その後ドキュメントフローの規則に従って要素が再配置されます。この挙動は、要素の position プロパティや float の設定状況によって大きく変化します。
標準ドキュメントフローにおける挙動
position が static（默认値）であり、float も設定されていない標準的なブロック要素における負のマージンの影響は、設定した方向によって異なります。
- top または left: 要素自身が設定した方向へ移動します。
- bottom または right: 要素自身の位置は変わらず、後続の要素が設定した方向へ引き寄せられます。これにより要素間の重なりが発生します。
- 幅の自動調整: 要素の width が auto である場合、left または right に負のマージンを設定すると、その分要素の表示領域が拡大されます。これは padding を増やしたような視覚効果をもたらします。
実装例：左マージンの負値
以下の例では、子要素に負の left マージンを設定し、親要素の境界を越えて左側へ延伸させています。
<div class="wrapper">
<div class="box"></div>
</div>.wrapper {
background-color: #e8f5e9;
border: 2px solid #66bb6a;
width: 300px;
height: 300px;
margin: 50px auto;
}
.box {
background-color: #fff9c4;
border: 2px solid #fdd835;
width: 150px;
height: 150px;
margin-left: -40px; /* 左側に 40px 延伸 */
}この設定により、黄色いボックスは左方向へ 40px 分移動し、親コンテナの左境界線を越えて表示されます。これはマージン境界線が要素の边框内側へ入り込むことで発生する現象です。
実装例：下マージンの負値
逆に bottom マージンを負に設定すると、要素自体は動かず、次の要素が引き上げられます。
<div class="container">
<div class="item-a"></div>
<div class="item-b"></div>
</div>.container {
width: 300px;
margin: 50px auto;
}
.item-a {
background-color: #fff9c4;
height: 100px;
margin-bottom: -30px; /* 下の要素を引き上げる */
}
.item-b {
background-color: #ffccbc;
height: 100px;
}item-a の下端マージンが内側へ込むため、item-b は item-a のマージン境界線まで上昇し、結果として両要素が 30px 分重なり合って表示されます。
位置指定（position）との関係
要素の position プロパティが変更されると、負のマージンの影響範囲も変化します。
relative の場合
position: relative は標準フローを維持しつつ位置をずらすため、負マージンの挙動は static とほぼ同様です。ただし、重なりが発生した場合の積み重ね順序（z-index の文脈）において、relative 要素が後続の static 要素より上位に表示される傾向があります。
absolute の場合
position: absolute で要素がフローから完全に除外されている場合、負のマージンはその要素自身の位置調整にのみ影響します。他の要素の配置やフローには干渉しません。
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
margin-left: -20px; /* 自身のみ左へ移動 */
}この場合、right や bottom の負マージンも後続要素に影響を与えず、自身のボックスサイズ計算に関与するのみです。
浮動（float）要素における負マージン
float プロパティが設定された要素では、負のマージンによりさらに複雑なレイアウト制御が可能になります。
- 浮动方向と同じ側: 要素がその方向へ移動します。
- 浮动方向と逆側: 要素自体は動かず、周囲の要素が引き寄せられます。
- 行の昇格: 負のマージンにより要素が親コンテナの境界を越え、かつ前の行に浮動要素がある場合、その要素は上の行へと引き上げられることがあります。
実装例：浮動要素の引き上げ
複数の浮動要素が存在する状態で、特定の要素に大きな負のマージンを設定すると、レイアウト段組みを超えて配置させることができます。
<div class="float-parent">
<div class="float-item item-1"></div>
<div class="float-item item-2"></div>
<div class="float-item item-3"></div>
</div>.float-parent {
width: 400px;
border: 1px solid #ccc;
}
.float-item {
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.item-2 {
background-color: #ffccbc;
margin-left: -120px; /* 親領域を超えて左へ移動 */
}
.item-3 {
background-color: #b3e5fc;
}item-2 に大きな負の left マージンを設定することで、本来 2 行目に表示されるべき要素が、1 行目の item-1 の横、あるいは親要素の境界外へ移動します。さらに、この移動により空間が生まれると、後続の item-3 が自動的に繰り上がって表示される現象も確認できます。これは、マージン境界線が再計算され、フローの制約が緩和されることで発生します。