これは思い出に残る問題です。私が初めてこの問題に遭遇したのは、学校の技術部でした。その時、この問題を他のメンバーと共有しました。その後、フロントエンドに書くことは減りました。2 年後、私は練習しました。 WeChat アプレットで初めてこの問題に遭遇しました。
他の方のブログからの分かりやすい説明は以下の通りです。
要素が別の要素内に含まれている場合、マージンを区切るパディングや境界線がないことを前提として、それらの上マージンおよび/または下マージンもマージされます。下の写真をご覧ください
さらに、白い点は次のとおりです。親要素の最初の子要素の margin-top が有効な境界線またはパディングと一致しない場合、レイヤーごとに独自の「リーダーシップ」を見つけ続けます (親要素、祖先要素)。トラブル。リーダーに効果的な境界線や水増しを設定している限り、このリーダーのいないマージンを効果的に制御して、リーダーのマージンが飛躍したり、勅令を誤って説いたり、自分のマージンをリーダーのマージンとして実行したりするのを防ぐことができます。
垂直マージンのマージの解決策は上で説明しましたが、親要素に border-top または padding-top を追加すると、この問題を解決できます。(https://www.hicss.net/do-not-tell-me-you-question-margin/ この記事を引用)
解決：
1. 親要素の高さを変更し、padding-top スタイルのシミュレーションを追加します (一般的に使用されます);
2. 親要素に overflow:hidden; スタイルを追加します (完璧);
5. 親要素または子要素のフローティングを宣言します (利用可能) );
3 .親要素に境界線を追加します (利用可能);
4. 子要素の前に追加の要素を追加し、高さを 1px に設定し、overflow:hidden (インライン要素の場合は、ブロック要素として宣言) (長文); 6.
親要素または子要素の場合、絶対位置指定 (...) を宣言します。