はみ出すコンテンツを表現する一般的なコーディング方法

例えば、以下のような図の場合。白背景部分はpadding:20px;の余白を持ったボックスなんですが、見出しの黒背景は、そのpaddingを超えて表示されています。
1408042311

HTMLの記述は以下のように、#contents内にh1pが内包されたオーソドックスな構造です。

<div id="contents">
	<h1>見出し</h1>
	<p>文章</p>
</div>

これに対してCSSは以下。7行目のmarginと8行目のpaddingが肝です。

#contents {
 width: 450px;
 margin: 0 auto;
 padding: 20px;
}
h1 {
 margin: 0 -20px;
 padding: 0 20px;
 color: #fff;
 background: #333;
}

#contentspadding:20px;が指定されているので、通常だとボックス内側20pxは余白になるはずですが、h1に対してネガティブマージンで左右の余白分(20px)だけ広げます(CSS7行目部分)。

で、あとはpaddingを使って文字の位置などを適宜調整すれば完了。すごく簡単ですよね。