inner DIVのmargin-topの設定が機能しない問題の解決策

(1)

最近別のウェブサイトで作業していたときにこの問題に再び遭遇し、注意深く研究して解決することにしました。

コードは次のとおりです:

最上位レイヤー

> 子層 ffに問題があります。子レイヤーと親レイヤーは連結されていますが、親レイヤーと上のレイヤーは200px離れています。 私は困惑したので、Google に問い合わせると、次の文が得られました:

2 つのコンテナがネストされている場合、外側のコンテナと内側のコンテナの間に他の要素がない場合、Firefox は内側の要素のマージンを削除します-top は親要素に作用します。

つまり、子レイヤーは親レイヤーの最初の空でない子要素であるため、margin-topを使用するとこのエラーが発生します。

解決策は 2 つあります:

1. フローティングを使用して問題を解決します。つまり、サブレイヤーのコードを次のように変更します。

Sub- layer

2.

padding-top

を使用して問題を解決します。つまり、

Sub-layer< /p>

(2)

このような問題によく遭遇します。つまり、外側の層 p の高さと幅が設定されている場合、内側の層 p がマーリングで設定されている場合です。 -top では動作しません (FIREFOX と IE8 でテスト済み) 理由は大まかに言うと、レイアウトを取得できないのは内層 p です。たとえば、次のコード:

> ;

テストにより、bp のマージントップは動作しません。表示効果はまだ 0px です。 firebug を使用してこれを Firefox で表示すると、margin-top の値が 10px であることがわかります。問題の解決策は次のとおりです。

1. margin-top を padding-top に変更します。内側の p が設定されていないことです
2. 外側の p に padding-top を追加します:

A、float: left または right

B、position: 絶対

C、display: inline-block or table-cell or other table type

D,

overflow

: hidden or auto

たとえば、上記のコードを次のように変更できます: