css - CSS - 親のパディングを削除する負のマージン

Question

ラッパー要素のパディングを削除するために負のマージンを使用することは良い習慣ですか?

たとえば、次のコードのどれを使用するのが適切ですか?

<div style="padding: 5px;">
 Shortened width string
 <div style="margin: 0 -5px;">Full width string</div>
 Shortened width string
</div>

また

<div>
 <div style="padding: 5px;">Shortened width string</div>
 <div>Full width string</div>
 <div style="padding: 5px;">Shortened width string</div>
</div>

Answer 1

水平パディングがないように宣言しないのはなぜpadding:5px 0;ですか? 負のマージンを使用してもまったく問題ないと私は主張しますが、それはそのために作成されたものですが、そもそもそれらを回避できる場合はそうしてください.

Answer 2

負のマージンはdivを隠します…。zoom:1, position: relative の裏技です。

ここに例があります

問題：

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

ツールバーの div の IE の赤い領域で、それ自体を非表示にします。zoom: 1 を使用している場合でも、この問題を解決するには、position: relative も追加する必要があります。

解決：

あなたのcssクラスは

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

Answer 3

まあ、それはハックに接しています。節度を持って使用する限り、問題ないと思います。重要なのは、読みやすく、理解しやすいことを確認することです。必要に応じてコメントを追加します。

Answer 4

2番目ははるかに優れています。IE で問題が発生するため、負のマージンは避ける必要があります。