マージンを中心とした要素上の余白マージン：0 auto;

Question

Border CSSコマンドで単純な境界線を追加する固定幅ページがあります。しかし、私はこの境界線がページを風船に掛け、小さな画面に水平スクロールバーを持たせたくありません。私はCSSとあまりにも優れていませんが、移動したくない他の要素に罫線を追加するためにすでに同様のことを行っていたので、境界の幅をオフセットするために負のマージンを使用して調べました。しかし、私がメインのコンテナ部門でそれを行うと、すべてが中心から外れて、ページの左側に壊れてしまいます。私はBlueprintのCSSフレームワークを使用しています。そこにはマージンを乱しているものがあり、メインコンテナに「マージン：0オート」が適用されていることがわかりました。それをページの中央に配置します。

これで、レイアウトを画面の中央に置いて、余白の枠線をページに適用する方法を今質問します。私はdiv内のコンテナをラップしようとし、それに境界と負のマージンを適用しようとしましたが、サイコロ、私はコンテナ内のdivを入れ子にして、コンテナに境界線を適用しようとしましたが、それはひどくまた行きました。誰か私にここに骨を投げる！

Answer 1

負のマージンが機能している場合は、幅が固定されたラッパーdivを追加してmargin: 0 autoにセンタリングを戻すことができます。

私のテストでは、マイナスマージンはボックスの幅を変更しませんでした。他のいくつかの戦略：

1. ボーダーによって追加された幅をオフセットするようにdivの幅を調整します。
2. 左と右の罫線をシミュレートする背景イメージをdivに追加します。
3. JavaScriptを使用してウィンドウの幅を検出し、必要に応じて枠線を削除します。
4. body { overflow-x: hidden }を追加すると、水平スクロールバーが表示されなくなります。
5. 余裕がある場合にのみ境界を追加するには、CSS3 media queryを使用してください（古いブラウザの場合は、JavaScript（＃3を参照）に戻ってもかまいません）。

更新：代わりに負のマージンの境界が最初の場所での要素の幅に追加されないように、あなたはおそらくbox-sizing: border-boxを使用することができます。