css - 負のマージンを持つ CSS 正のパディング

Question

Sonata プロジェクトで次の css を見ました。

HTML:

<div class="content">
    <div class="header"></div>
</div>

CSS:

.content {
    padding: 20px;
    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
}

.header {
    padding: 20px 20px 10px;
    margin: -20px -20px 20px;
}

私の質問は、正のパディングを使用し、負のマージンでそれらを無効にする目的/利点は何ですか? コードには負のマージンに関するコメントがありますが、実際にはわかりません。margin と padding の両方を 0 に設定しないのはなぜですか?

ありがとう！

Answer 1

Box-sizing は、コードが css3 を使用していることを明確にするのに役立ちます: http://css-tricks.com/box-sizing/

Answer 2

CSS Box Modelを見てください。border は padding と margin の間にあり、上記はおそらく border を外側に押し出すために使用されます。