このテストケースでボーダー折りたたみを無効にする

次のデモHTMLをチェックすると、すべてのブラウザーのページの上部に予期しないオレンジ色の境界線が表示されます（チェックしました）。 タグが< div>タグに置き換えられた場合、すべてが期待どおりに機能します。このテストケースでボーダー折りたたみを無効にする

<!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"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Test Lay-Out</title>   
     <style> 
      html{ 
       overflow: auto; /*for IE*/ 
       height: 100%; 
      } 

      body{ 
       background-color: orange; 
       margin: 0; 
       height: 100%; 
      } 
      #page{ 
       background-color: green; 

       height: 100%; 
       margin-bottom: -50px; 
      } 
      #footer{ 
       background-color: red; 
       height: 50px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="page"> 
      <p>test</p> 
     </div> 
     <div id="footer">footer</div> 
    </body> 
</html>

< pは>上マージンを持っており、国境崩壊を介して親要素に崩壊しますので、これがあります。これはテキスト段落などを作成するのに望ましい効果ですが、ほとんどレイアウトには役に立ちません。
ボーダーが特定の要素（この場合は&ltp;から親divまで）に昇格していないことを確認するにはどうすればよいですか？

--UPDATE--
の答えはすべての道「段落のパディングを無効にする」下るように見えるので、私は私の質問を少し手直しして、タイトルを変更。
pからパディングを削除するのは、原因ではなく、シンプトンを削除する方法です。

出典

2009-05-13 Boris Callens

要素にはデフォルトでmargin-topが含まれており、コンテンツ全体がプッシュダウンされます。あなたはのmargin-top: 0を使ってそれを取り除くことができます。

出典

2009-05-13 07:55:44 RichieHindle

確かに。私はあなたが同じことをしている間に私の質問に答えていた;）しかし、これは実際に問題を解決するものではなく、単にsimptomsです。罫線の折りたたみがどのように便利なのか分かりますが、デフォルトにしないでください。私は国境崩壊を考えました：別れがそのトリックをするでしょう。しかし、それはしません。 –

はブロック要素であり、常に改行で始まるからです。あなたはあなたのコードがタグで仕事をしたいならば、あなたはこれはちょっとラメです

p 
{ 
    display:inline; 
}

出典

2009-05-13 07:56:57 Dmitris

新しい行は問題ではありません。それはブロック要素であるからです。それは私が心配していた親要素の崩壊した上端です。 –

CSSに追加しますが、私は実際にそれを自分自身を発見しました。
もう一度それは私を騙して崩壊する境界です。 Hereはそれを説明するよいフォーラムです。私の設計では要素からマージンを削除するのが適切でした。私が次に読んだことから、親にそれ自身の小さなマージンを与えています。

出典

2009-05-13 07:58:41

すべてのブラウザでは、定義したスタイルの前にデフォルトのスタイルシートが読み込まれます。

これは、ブラウザに「プレーン」HTMLを読み込むときに表示されるスタイルです。

ほとんどすべてのプロジェクトで、CSS resetを調べて使用する必要があります。

出典

2009-05-13 07:59:16

CSSのリセットは良いアイデアだと私は同意しますが、どこかから1つ取り出すことで、前に頭が痛むようになりました。 Cssは本当の雌犬なので、私は窮屈な船を走りたい。私自身のことを書いて、そこにあるすべての性格を知っていることを確かめます。私は「ホイールを再発明する」ことを知っていますが、この場合ホイールのナットボルトをすべて知りたいのです。 –

それはうまく、私は本当にサードパーティのリセットを主張していませんでした。 –

は、あなたのスタイルにこれを追加します。

#page p{ margin-top: 0; }

出典

2009-05-13 07:59:46 lock

ああ、そんなに速く答えられたようなことを避けるための良い方法だよ。 – lock

私は知っているが、答えは本当に原因を解決していない。また、あなたの答えの間隔は慎重に決められていますか？ –

私はちょうどそれをテストし、それは本当にああ動作し、多くの人々は本当に同じ答えを与えた – lock

うん段落の前と後にいくつかのスペースを残しているため、上部のギャップが存在します。以下は空き領域を削除します：

<!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"> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
       <title>Test Lay-Out</title>      
       <style> 
         html{ 
           overflow: auto; /*for IE*/ 
           height: 100%; 
         } 

         body{ 
           background-color: orange; 
           margin: 0; 
           height: 100%; 
         } 
         #page{ 
           background-color: green; 
           height: 100%; 
           margin-bottom: -50px; 
         } 
         #page p.first{ 
           margin-top:0; 
         } 
         #footer{ 
           background-color: red; 
           height: 50px; 
         } 
       </style> 
     </head> 
     <body> 
       <div id="page"> 
       <p class="first">test</p> 
       </div> 
       <div id="footer">footer</div> 
     </body> 
</html>

出典

2009-05-13 08:12:53 TheVillageIdiot

親要素にoverflow: hidden;を追加することはどうですか？

出典

2009-05-13 08:15:39 Pumpuli

それは..オーバーフローを隠すだろう。私はそれが私が目指しているとは思わない。 –

本当ですか？実際には、パラグラフは親要素内に完全に入ります。マージンとすべて。 – Pumpuli

これはデモのケースでは真実かもしれませんが、オーバーフローも隠蔽します。それは私が望むものではありません。実際のサイトでは、私のコンテンツは "test"という単語よりはるかに大きいかもしれません。 –

body/htmlの埋め込みもリセットする必要があります。

出典

2009-05-13 21:25:33 Jin

このテストケースでボーダー折りたたみを無効にする

答えて

関連する問題