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

まあそれはハックさを境にいます。それが拘束力のあるthpughと共に使用されている限り、私はそれが大丈夫だと言うでしょう。キーは、読んで理解しやすいことを確認することです。必要に応じてコメントを追加します。

Answer 2

padding:5px 0;を宣言して水平パディングを作成してみませんか？負のマージンを使用することは完全にうまくいくと主張しますが、それはそのために作られたものですが、最初にそれらを避けることができれば、そうしてください。

Answer 3

第2位ははるかに優れています。負のマージンはIEで問題を引き起こすので避けてください。

Answer 4

負のマージンdivを隠す...。ここで 使用ズームをだましている：1、ポジション：ツールバーDIV隠す自体のIE赤色領域における

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

：相対

ここ例

問題です。我々はズームを使用しています：1.私たちは位置を追加する必要があるこの問題を取り除く：相対的すぎる。

ソリューション：

ので、あなたのCSSクラスは

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