サイトを見るときに私を混乱させるCSSの側面の1つは、レイアウトに使用される負のマージンです。デザイナーがページ全体にわたって負のマージンを使って何をしようとしているのかを理解するのにはしばらく時間がかかります。私はいくつかのdivがあり、いくつかは負のマージンを使用しているページを意味し、私はそれらを理解しようとしている私の頭を取得しようとしています。私はFirebugを使って値を変更し、その効果を見ます。CSSのマイナスマージン：良いチュートリアルやトリックサイトですか？
ウェブ・デザイナーにマイナスのマージンをどのように活用するかを教える優れたチュートリアルのバッグがありますか？もちろんクロスブラウザーで動作するトリックです。
左に何の余白があるか把握しようとすると-100％です。
一般に、CSSの幅は少し混乱する可能性があります。絶対幅は簡単です。相対的な幅は、いくつかの面白い動作につながります。基本的に、幅のパーセンテージは包含要素に相対的です。親要素が絶対幅を持っているならば、簡単に解決できます。しかし、しばしばそうではありませんので、ブラウザがどのくらいのスペースを必要としているかを複雑に計算することができます。すべての子がパーセンテージの幅であれば、デザイナーが通常意図するよりも幅が狭くなることがよくあります。
したがって、margin-left: -100%が表示されている場合は、基本的に、この要素を親の外側に移動し、親の幅全体を左に移動することを意味します。負のマージンの1つの結果（特に）は、彼らが頻繁に移動するスペースはそこにいることに気付かず、レイアウトを計画するときにこれを考慮する必要があります。
<div id="outer">
Outer
<div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>
それは本当に動作しません。
もう一つの良いヒントは、あなたがこのような状況を持っている場合ということです。それとも、（iirc）Firefoxでは動作しますが、IE（任意のバージョン）では動作しません。したがって、このようなことをしたい場合は、contains要素を使用する必要があります。
<div id="outer">
Outer
<div id="wrap">
<div id="inner">Inner</div>
</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>
これはブラウザ互換です。ここで
は、負のマージンを示している完全な例です（FF、ChromeとIE8で検証）：サイトで：
削除死んImageShackのリンク
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; }
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
小さなノート私は8-12の「ボックス」（1）を含むフロントページ全体をレイアウトする必要があったので、ボックスが正しい位置にあることを確認するために「boder：1px solid black」を使用してから、 "moを得るサイトのデザインはそれ以下である」
数日後、実際の背景画像が表示されました。画像には小さな「影」が含まれていて、画像の内容は、私が使用した無地の色合いに基づいた陰影でした。
正確な位置とサイズを維持し、元のボックスの背景として新しい画像を設定するには、 "margin：0px -5px -5px -5px"を使用します。
希望すれば、マイナスのマージンを使用する時期について考えてください。
（1）お客様が使用していた用語は、lamer