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

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

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

<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;
}

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

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

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;
}

本文中の要素に margin-left や padding-left をとらなくても，左に余白が入る。

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

d-spica home | d-spica blog

<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;
}

2008-05-12: ページ5を更新しました。テキストテキストテキスト。
2008-05-10: ページ4を更新しました。テキストテキストテキスト。
2008-05-07: ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
2008-05-06: ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
2008-05-04: ページ1を更新しました。テキストテキストテキスト。

<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でのネガティブマージン

12345678901234567890
12345678901234567890

<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;
}

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;
}

12345678901234567890
12345678901234567890

<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では，右側の部分が表示されない。