2009-09-01 17 views
1

のは、私は、次の最小限のHTMLコードがあるとしましょう:だけH1の背景がで着色されているかのようにページの上部に隙間がありますは、背景色に影響を与え

<!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が親のdivタグを押し下げているかのように。しかし、 "border:solid 1px red;"を追加するとdivのスタイルには、divの背景だけがH1のものではなく、石灰の中にあります。 IE8、FF3.5、Chromeでテストしました。彼らはすべて同じ行動をしています。 XHTMLの厳密なDocTypeを削除すると、 "期待どおり"に動作します。私は何が欠けていますか?ありがとう。

+0

ページ上部のギャップが望ましいかどうか。 –

+0

私はそれが予期しないと言います。私はdivがそのスペースを占めていることを意味しています。少なくとも、あなたがその境界線を指定するまでは、div全体が色付けされているわけではなく、H1が現れる部分だけです。 H1を除いて、divが透明になるのはほぼ同じです。 – pbz

答えて

1

私が「欠けていた」のは、collapsing marginsのコンセプトでした。 divの境界線を指定することで、効果的に余白を崩壊させて、期待通りの結果を得ることができます。分割を解除するもう1つの方法は、divに少なくとも1pxのパディングを与えることです。残念ながら、私の状況ではこれらのどちらも問題ありません。つまり、divに境界やパディングが必要なわけではないので、別の解決策を見つける必要がありますが、少なくともその動作について説明します。

関連する問題