CSS マイナスマージンnotes_html/css_WEB-ITnose

水平方向の書式設定

要素に幅を設定すると、それはコンテンツ領域の幅に影響しますが、要素の内側のマージン、境界線、外側のマージンを指定すると、幅の値は増加します（IEの従来の形式）。ボックス モデルの内側のマージンと境界線は、W3C 標準のボックス モデルの幅を拡大します。) 以下の I W3C 標準ボックス モデルを使用して、要素に対する負のマージンの影響について説明します。

#test {            width:200px;            background: red;            padding: 20px;            border:10px solid black;            margin: 20px;       }        <p id="test">aaa</p>

上の p 要素が占める幅の値 = margin(left+right) + padding(left+right) + border(left+)右) + contentwidth = 20*2 + 20*2 + 10*2 + 200 = 300px

通常のフローにおけるブロックレベル要素ボックスの水平部分の合計は、親要素（親要素は通常ブロックレベルの要素です)

要素の幅の値に影響する 7 つの属性のうち 3 つだけを auto に設定できます 要素の contentwidth margin-left margin-right 負のマージンについて話す前に、auto について説明する必要があります

(1) 通常の状況では、これら 3 つの属性の合計は親要素の幅に直接等しく設定されます

( 2) auto 値を設定すると、合計は自動的に親要素の幅の値と等しくなります

#test {            width:200px;            background: red;            margin:0 auto 0 100px;        }            div {            width:500px;        }        <div><p id="test">aaa</p></div>

上記の例では、親要素を含む要素 margin-left:100px margin-right:auto width:200px を設定しています 親要素の幅は 500px

です。右マージンが自動的に200pxになることがわかりました

2.1 左右のマージンは自動で一定の幅になります 親要素の残りのコンテンツ幅（親要素のコンテンツ幅 - 子要素のコンテンツ幅） ) コンテンツの幅) は、親要素内で子要素の中央揃えを実現するために、margin-left margin-right に均等に割り当てられます

2.2 1 つのマージンは自動、子要素の幅は自動、もう 1 つのマージンは固定長です

#test {            width:auto;            background: red;            margin:0 auto 0 100px;        }            div {            width:500px;        }        <div><p id="test">aaa</p></div>

この時に設定すると auto のマージンが 0 になり、幅は残りの値を自動的に埋めます（可能な限り広く）

2.3 両方とも auto に設定すると、2 つのマージンが 0 になり、子要素の幅が親になります 要素のコンテンツの幅

マージンが負の場合を考えてみましょう

#test {

width:auto;
background: red;
margin:0 -150px 0 100px;
}
div {
width:50 0px ;
}

aaa

上記の例では、親要素のコンテンツ幅は 500、子要素の幅は auto の場合、margin-left は 100、margin-right は -150px です。実際のコンテンツ幅の値

550 > 500 を見てみましょう。つまり、子要素の幅が親要素のコンテンツの幅を超えていますが、合計幅の合計が 100 + auto(550) + (-150) = 500 であることは問題ありません。親要素のコンテンツの幅と等しい場合、auto は 550 になります

要素に対する負のマージンの影響を考慮すると、ブラウザはマージンを負の値とみなします。実際には、マージンによって要素の幅が減少するわけではありません。

p {            background: red;            display:inline-block;            width:100px;            margin-right: -20px;        }                <p>aaaaaaa</p><span>aaaa</span>

上の例では、実際には要素の幅は 100 のままですが、負のマージンが設定されているため、ブラウザはその境界線が小さくなったと認識します。

下の図は、margin-right が負に設定されていない場合です

position:relative とは異なり、position:relative では、要素が元の位置に対してドキュメント フロー内でオフセットされます。移動しますが、要素は失われません。元のドキュメントフローの位置

特定のアプリケーションについては、以下を参照してください

リファレンス CSS 権威ガイド