0

以下では、div 内に h3 タグがあります。

#one {
  width:300px;
  height:200px;
  background-color:black;
  color:white;
}

h3 {
 margin-top:20px;
}

    <div id="one">
<h3>Coming Soon My Tools</h3>
</div>​

レンダリングすると、h3 タグの上マージンではなく、div の上マージンが移動されます。デモhttp://jsfiddle.net/EnigmaMaster/aZnjx/1/

を参照してください 。

h3 タグの前に div 内に何かを配置すると、マージンが適切に調整されます。また、h3 タグに display: inline-block を追加すると、適切にレンダリングされます。私の問題の解決策を探していません。この問題に関する情報を探しています。以前にこの問題に遭遇した人はいますか?

4

2 に答える 2

1

私の考えを裏付ける情報は今のところ見つかりませんが、私が知る限り、div は余白のないボックスです。したがって、div マージンと h3 マージンの「マージン崩壊」が発生します。div と h3 タグの間にテキストを追加すると、実際には新しいブロックが作成され、そのブロックへのオフセットとして h3 マージンが追加されます。div に 1px の境界線を追加する場合も同様です。その後、「崩壊」動作は消えます。前述のように、これをサポートする情報は見つかりませんが、URL をいじると動作が示されます。

于 2012-05-16T17:00:31.733 に答える
0

これをフィドルに差し込むだけです。私はあなたが同じことをすることを提案します：

#one {
  width:300px;
  height:200px;
  background-color:black;
    color:white;
    border: 1px solid 0000ff;
}

h3 {
 margin-top:20px;
 border: 1px solid #00ff00;
}

マージンは正しく機能しているようです（私はここでIE7を使用しています）。距離は、上部h3とdiv境界の間に作成されます。それがマージンです。

于 2012-05-16T16:55:30.950 に答える