マージンの重複問題を解決する方法

マージンの重複問題を解決する方法
1. まず、2つ以上の隣接する通常フローブロック要素の垂直マージンの崩壊を引き起こす原因を知る必要があります。

1. 2 つ以上は、数量が 1 より大きい必要があることを示し、折り畳みが要素間の相互作用であることを示します。A と B は折り畳まれるが、B は A と折り畳まれないという現象は存在しません。

2. 隣接とは、空でないコンテンツ、パディング、境界線、またはクリアによって分離されていないことを意味し、位置関係を示します。
分離されていない場合、要素の margin-top は通常フロー (非フローティング要素など) の最初の子要素の margin-top に隣接します。要素の高さが「auto」の場合にのみ、その margin-bottom は通常フロー (非フローティング要素など) の最後の子要素の margin-bottom に隣接します。

3. 縦方向とは、特定の方向を指します。縦方向の余白のみが折り畳まれます。つまり、横方向の余白は折り畳まれません。

2. では、要素の上下の余白がつぶれないようにするにはどうすればよいでしょうか?

1. フローティング要素、インラインブロック要素、絶対配置要素のマージンは、垂直方向の他の要素のマージンと相殺されません(これは上下に隣接する要素を指すことに注意してください)。

2. ブロックレベルの書式設定コンテキストを作成する要素は、その子要素の余白を折りたたまない(これは、BFCを作成する要素とその子要素が折りたたまれないことを意味することに注意してください)

BFC をトリガーする要因は、フロート (none を除く)、オーバーフロー (visible を除く)、表示 (table-cell/table-caption/inline-block)、位置 (static/relative を除く) であることは誰もが知っています。

明らかに、隣接する要素が折りたたまれるのを防ぐ要因は、BFC をトリガーする要因のサブセットであることがわかります。つまり、上下の隣接する要素に overflow:hidden を設定すると、BFC がトリガーされますが、上下の要素の上下の余白は折りたたまれます。

この問題は、実際には BFC とは何の関係もありません。皆さんが BFC を乱用しないことを願っています。BFC は万能ではないことを知っておく必要があります。BFC を作成した本来の目的は、要素自体 (その子要素を含む) が幅と高さを正しく計算できるようにすることです。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

折り畳みが行われない原因となる要因は、フローティング要素、インライン ブロック要素、絶対配置要素です。これは、BFC を作成する要因のサブセットにすぎませんが、BFC は overflow:hidden でも作成できるため、BFC を作成する要素が折り畳まれないことを意味するものではありません。逆に、親要素が BFC をトリガーすると、そのブロックレベルの子要素が代わりに折りたたまれます。

ここで、この問題を説明するためのデモを作成しました: http://whycss.com/demo/collspan_demo.html BFC を作成する 3 つの状況が説明されており、その結果、子要素の上部と下部の余白が失われます。

Kejun が最後に言及したのは、ズームです。これは、もともと IE ブラウザでサポートされていたズーム属性です。現在、WebKit コアを搭載した最新のブラウザのみがこれをサポートしています。ただし、hasLayout は IE8 より前のブラウザーでのみ正常にトリガーされ、IE 以外のブラウザーには影響がないため、同じ方法で BFC を作成する必要があります。 hasLayout と BFC の紹介については、私のブログ記事 http://www.smallni.com/?p=174 を参照してください。

この問題を解決する方法としては、実際には各要素に float、inline-block、absolute を設定する必要がない場合もあるため、書き込み時に上または下に設定するなど、同じ方向のマージンを使用することをお勧めします。

<<:  Linux システム AutoFs 自動マウント サービスのインストールと構成

>>:  Html+CSS 描画三角形アイコン

推薦する

CSS--overflow:hidden のプロジェクト例

以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...

VMware での Ubuntu 16.04 イメージの完全インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04イメージのインストールチュートリアルを参...

Vue uniapp はセグメンター効果を実現します

この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有し...

Baidu Maps を Web ページに埋め込み、Baidu Maps API を使用してマップをカスタマイズする詳細な手順

ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

TypeScript 名前空間のマージの説明

目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...

Vueはページキャッシュ機能を実装する

この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...

JavaScript の new 演算子を自分で実装する方法

目次コンストラクタ新しいオペレーター自分で新しいものを実装するコンストラクタnew を導入する前に、...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

メタタグコードを使用して、360 デュアルコアブラウザを互換モードではなく高速モードにデフォルト設定します。

あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...

Linux でファイルの種類を理解して識別する方法

序文ご存知のとおり、Linux ではハードディスクやグラフィック カードなどすべてがファイルです。 ...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...