6

div要素にマージンを設定していますが、body要素にもそのマージンがあります。

このコードを考えてみましょう：

<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

これが結果であり、問​​題です。 http://i54.tinypic.com/29ve1zl.jpg

これまでborder:1px solid transparent;、body要素にプロパティを追加することで問題を解決しました。1px境界線のためにスクロールバーが表示されるため、これにより100％の高さが台無しになります。なぜこれが起こるのですか？

考えられる解決策（ヘルプに感謝）：apadding-top:1pxとaを追加しますmargin-top:-1px。これにより、100％の高さがスクロールバーで台無しにならず、マージンの崩壊を回避できます。

4

3 に答える 3

3

これは、私が抱えていた問題に似ています:マージンと負のマージン。ボーダーではなくパディングトップを配置することで解決しましたが、これはあなたのデザインで少しうまく機能しますか? それ以外の場合は、このリンクを試してください: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

于 2011-10-12T15:43:56.743 に答える
2

This is caused by an effect known as collapsing margins.

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

http://www.w3.org/TR/css3-box/#collapsing-margins

于 2011-10-12T15:45:29.203 に答える