0

コードでマージンを使用したいのですが、いくつか問題があります。見てください：

<div id="outer">
<div id="inner1">
    Margin not coming from top (not absolute)
</div>

<div id="inner2">
    Div has absolue prop
</div>

</p>

CSSコードは次のとおりです。

#outer {
    margin: 100px;
    background-color: green;
    height: 300px;
    widht: 400px;
}

#inner1 {
    margin: 10px;
    background-color: red;
}

#inner2 {
    position: absolute;
    margin: 20px;
    background-color: blue;
}

</p>

  1. #inner2位置を絶対に設定するとdivの幅が制限される理由がわかりません。

  2. #inner1div は絶対プロパティを持たないため、上からのマージンがありません。私はこれを理解できません。説明してください。

出力は次のとおりです。

4

3 に答える 3

1

Ques1: 位置を絶対に設定すると、inner2 div の幅が制限される理由がわかりません。

位置を inner2 div の絶対位置に設定すると、テキストの範囲内で幅 auto が取得されます。position を inner2 div の相対に設定し、outer div の幅を取得します。

したがって、絶対配置が必要な場合は、inner2 div の幅も設定します。

質問 2: inner1 の div には絶対プロパティがないため、上からのマージンがありません。私はこれを理解できません。説明してください。

ドキュメント フローから、内側の div はそれが他の div (外側) の内側にあることを決して知りません。境界線または位置を外側の div の絶対値に設定すると、これが修正されます。

フィドルhttp://jsfiddle.net/C7dE2/20/

于 2012-08-17T07:44:22.790 に答える
1

設定 position:absoluteにより、問題の要素がドキュメント構造の通常の流れから削除されます。そのため、幅を明示的に設定しない限り、どのくらいの幅になるかわかりません。それがあなたが求めている効果である場合は、幅を明示的に設定できます..

これを見る

絶対位置と相対位置の幅と高さ

于 2012-08-17T07:33:05.440 に答える
0

緑の div のpadding-topプロパティを使用する必要があります。高い値を設定すると、全体がさらに下に押し出さ#inner1れます。margin-top#outer

于 2012-08-17T07:29:07.303 に答える