見出しにネガティブマージン

本文の左に見出しよりも大きな余白をとりたいというとき。

<div class="section">
  <h3>見出し</h3>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p>
</div>

div.section {
  padding-left: 15px;
}

div.section h3 {
  margin-left: -15px;
  padding: 5px 10px;
  background: #999;
  color: #FFF;
}

通常は横方向の margin をとると，余白ができた分，ボックスが中に縮まるのですが，ネガティブマージをとると，外に広がったようになります。

まず親要素となる div.section に padding-left をとり，左側に余白をとります。h3 にネガティブマージンをとって左側に広げます。

見出しを除いた本文のところを改めて div で囲い margin-left や padding-left をとったり，p. ul, ol, dl, blockquote, pre, table, ...といったそれぞれの要素に margin-left や padding-left をとるということをしなくても，左に余白が入れられます。

上と同じXHTMLでこんなふうにもなります。

div.section {
  padding: 0 15px 10px;
  border: solid 1px #666;
}

div.section h3 {
  margin: 0 -15px;
  padding: 5px 10px;
  background: #999;
  border-bottom: solid 1px #666;
  color: #FFF;
}

こちらは，左右の padding をネガティブマージンで解消しています。

ネガティブマージンで前の要素の横に続ける

フッターなどで。

<div id="footer">
  <p><a href="http:www.d-spica.com/">d-spica home</a> | <a href="http:blog.d-spica.com/">d-spica blog</a></p>
  <p class="credit">Copyright&copy; d-spica.</p>
</div>

div#footer {
  border-top: solid 2px #999;
  padding: 20px 5px;
  line-height: 1.5;
}

div#footer p {
  margin: 0;
}

div#footer p.credit {
  margin-top: -1.5em;
  text-align: right;
}

縦方向の margin は，ボックスの上下の間隔を作りますが，ネガティブマージをとると，間隔が詰まることになります。

後のほうの p.credit を，ネガティブマージンでちょうど1行分上にあげて（詰めて）います。

前回，dtをfloatする場合の注意点 で紹介した，dt と dd を横並びにするのも，ネガティブマージンできます。

<dl>
  <dt>2008-05-12</dt>
  <dd>ページ5を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-10</dt>
  <dd>ページ4を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-07</dt>
  <dd>ページ3を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-06</dt>
  <dd>ページ2を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-04</dt>
  <dd>ページ1を更新しました。テキストテキストテキスト。</dd>
</dl>

dl {
  line-height: 1.5;
}

dl dt {
  width: 7em;
}

dl dd {
  margin: -1.5em 0 10px 7em;
  margin-bottom: 10px;
}

floatして横並びにするよりも便利な場合が多々あります。

IEでのネガティブマージン

本来なら，このように表示されるはずなのですが...。

<div class="section">
  <p class="first">12345678901234567890<br />
    12345678901234567890</p>
  <p class="second">12345678901234567890<br />
    12345678901234567890</p>
  <p class="third">12345678901234567890<br />
    12345678901234567890</p>
  <p class="fourth">12345678901234567890<br />
    12345678901234567890</p>
  </div>
</div>

div.section {
  margin: 10px;
  border: solid 10px #CCC;
  padding: 10px;
  width: 372px;
}

div.section p {
  padding: 5px;
  border: solid 1px #666;
  background: #F3F3F3;
}

div.section p.first {
  margin: 10px -10px;
}

div.section p.second {
  margin: 10px -20px;
}

div.section p.third {
  margin: 10px -30px;
}

div.section p.fourth {
  margin: 10px -40px;
}

IE6では，ネガティブマージンをとった要素を包含する祖先要素に width が明示的に指定してあると，その祖先要素の padding辺を越えた部分が表示されなくなります。

IE7では，左側は表示されますが，右側が表示されなくなります。

参考

各ブラウザでの表示を確認できるように，以下に同じ内容をまとめておきましたので，参考にしてください。

• CSS - ネガティブマージン | Try | d-spica