マージンの重複/ BFC-フロントエンドの毎日の要約

オーバーラップマージンとは何ですか

二つ(親子又は兄弟関係)マージンが設定されているブロックレベル要素は、次にブラウザが最大外縁から隣接する二つのブロック要素をフェッチする隣接(二マージンが、等しい場合取りますa)の設定値。

下:ブラウザ、マージントップ.con2スタイルのこのコンソールスタイルのバーでは
とCON1スタイルマージン-ボタンセット10pxのですが、ブラウザが効果をレンダリングかかわらず、むしろ20ピクセルよりも、10pxのです。これは、オーバーラップマージンの影響であります
ここに画像を挿入説明

どのようにオーバーラップマージンそれを防ぐには?

创建新的BFC可以防止

BFCそれは何ですか?

英語フルネーム:ブロックの書式コンテキスト中国人が理解:ブロックレベルのコンテキストをフォーマットします

条件のいずれか、BFCの形成に出会います。

  1. フロート:ノードを除くfloat値。
  2. 位置決め要素:位置(絶対、固定)
  3. 表示:インラインブロック、テーブルセル、テーブルキャプション之一
  4. オーバーフロー:目に見える、値(非表示、スクロール)を除き

オーバーラップマージン以下のソリューション

別のBFCの作成ここに画像を挿入説明

公開された11元の記事 ウォンの賞賛1 ビュー1161

おすすめ

転載: blog.csdn.net/u014403513/article/details/103589641