1

次の最小限の HTML コードがあるとします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body style="background-color:silver; padding:0px; margin:0px;">
  <div style="background-color:Lime;">
    <h1>Title</h1>
  </div>
</body>
</html>

ページの上部にギャップがあり、H1 の背景だけがライムで着色されているか、H1 が親の div タグを押し下げているように見えます。ただし、「border:solid 1px red;」を追加すると、div のスタイルでは、H1 だけでなく、div の背景全体がライムになっています。IE8、FF3.5、および Chrome でテストしました。それらはすべて同じ動作をします。XHTML の厳密な DocType を削除すると、「期待どおり」に機能します。私は何が欠けていますか？ありがとう。

4

1 に答える 1

1

私が「欠けていた」のは、マージンを折りたたむという概念でした。div の境界線を指定することで、余白を効果的に元に戻すことができ、期待どおりの結果が得られます。折りたたみを解除するもう 1 つの方法は、div に少なくとも 1 ピクセルのパディングを与えることです。残念ながら、これらのどちらも私の状況では受け入れられません。つまり、div にボーダーやパディングが必要ないため、別の解決策を見つける必要がありますが、少なくとも動作は説明されています。

于 2009-09-01T19:36:01.413 に答える