CSS margin-top の使用時によく発生する問題のまとめ-CSSチュートリアル-php.cn

CSS margin-top の使用時によく発生する問題のまとめ

伊谢尔伦

リリース： 2017-06-01 13:10:09

オリジナル

2737 人が閲覧しました

CSS スタイルでは、margin-top 属性は要素の上マージンを設定します。負の値も許容されます。固定上マージンを定義するためのデフォルト値は 0 です。すべての主要なブラウザは margin-top 属性をサポートしています。この記事では、フロントエンドページで margin-top 属性を使用するときによく発生するいくつかの問題について具体的に説明します。設定が親要素に影響を与える場合はどうすればよいでしょうか。 margin-top 属性が機能しない場合はどうすればよいですか?等

1. margin-top の設定が親要素に影響を与える場合はどうすればよいですか?

1. 子要素のマージン上部から親要素に影響するマージン折りたたみの問題を解決する方法

CSS margin-top の使用時によく発生する問題のまとめ

原理:マージン折りたたみ(Collapsing Margins)

隣接する 2 つの余白、または複数の余白（余白）が垂直方向に 1 つの余白に結合されます。ここでの隣接とは、上下のpadding-top、padding-bottom、border-top、border-bottomがなく、要素の内容が空ではないことを意味します。

最も一般的なマージンの折りたたみは、

要素が上下に 1em のマージンを持っている場合に、隣接する p には 2em ではなく 1em のギャップしか表示されません。

2. CSS 子要素の margin-top が親要素に影響するのはなぜですか? 2) margin の代わりに Padding を使用します3. 子要素に margin-top を追加すると、親要素の問題が増加します

子要素の margin-top は、子要素を親要素から分離しません。逆に、親要素に margin-top を追加するのと同じ効果があります。解決策、具体的には:

1) 親要素の高さを変更し、padding-top スタイルのシミュレーションを追加します (padding-top:1px;)

2) 親要素に overflow:hidden;

を追加します 3) Float (float) :left; 親要素または子要素の life 要素で使用可能ですが推奨されません 4) 親要素に境界線を追加します (境界線: 1px 透明)
5) 親要素または子要素の絶対位置を宣言します

6) 親要素にコンテンツ生成を追加します #father:before{content:' ';display:table};

2. margin を使用する -top 属性が機能しない場合はどうすればよいですか?

Firefox マージントップ障害の原因と解決策

浮動ブロックレベル要素のマージンボトムは常に浮動ブロックレベルの兄弟要素と同じですその兄弟要素がクリア操作を使用しない限り、マージントップに隣接するその背後 (次のフロー内ブロックレベルの兄弟) がマージントップに隣接します。フローティングブロックレベル要素のマージントップは、その最初のフローティングブロックレベルの子 (フローティングされた最初のインフローブロックレベルの子) のマージントップに隣接しています (要素にボーダートップがない場合、パディングはありません) - 最上位要素と子要素はクリアされません)。 2.

マージントップの失敗、CSS + div レイアウトにおける CSS ボックスモデルのマージン結合の問題

通常のドキュメントフローでは、2 つ以上のブロックレベルのボックスモデルの隣接する垂直マージンが折りたたまれます。最終的なマージン値の計算方法は次のとおりです。

a、すべてが正の値である場合は、最大値を取得します。

b、すべてが正の値ではない場合は、絶対値を取得し、正の値から最大値を減算します。 c、正の値がない場合は、絶対値を取得し、0 から最大値を減算します。 CSS margin-top の使用時によく発生する問題のまとめ