どのようにCSSの作業に負のマージンを行い、理由です(マージントップは:!-5 =マージン底:5)?
答え
負のマージンは、CSSで有効であり、その(準拠)の挙動を理解することは、主に基づいているボックスモデルとマージンが崩壊します。特定のシナリオはより複雑ですが、一般的なミスの多くは、仕様を検討した後に回避することができます。
記載されているように、例えば、サンプル・コードのレンダリングは、CSS仕様によって案内される絶対位置非置換要素のための高さとマージンを計算します。
私は、グラフィカルな表現を作るとしたら、私はおそらく(縮尺通りではない)、このようなものでいいと思います。
マージンボックス失った8px
上には、しかし、これは影響しません内容&パディングボックスを。あなたの要素が絶対的に配置されているので、要素8pxを上に移動すると、レイアウトへの更なる妨害を引き起こすことはありません。常にそうではありません静的で、フローコンテンツを持ちます。
ボーナス:
まだ仕様を読むことであることを説得力の必要がある(とは対照的に、移動するための方法、このような記事)?私はあなたが垂直要素を中心にしようとしている参照して、なぜあなたは設定しなければならないのとではありませんか?margin-top:-8px;
margin-top:-50%;
まあ、CSSでの垂直センタリングがあり、それがあるべきよりも難しいです。設定する際上部または底%で余白を、値は次のように計算され、常に相対パーセンテージ幅を含むブロックの。これはかなり一般的な落とし穴であると癖はほとんどW3ドコサの外に記載されていません