境界線がある場合にのみCSS Div要素の機能

Question

私は新しい基盤のサイトを設計しており、4月15日を終了日として設定しました。コンテンツを編集し、デザインを微調整する以外は、準備ができています。微調整では、私は誰かに私が解決するのを助けてくれるように頼んでほしいと思う厄介な小さな問題に取り組んでいます。問題は単にこれだけです。サイトの構造内の分割は、周囲に境界線がない限り機能しないように機能しません。以前はあまりにも不安なことは見たことがありません。

この問題は、レイアウトでエレメントがどのようにやり取りされるかに関係しているようです。まず、背景画像を保持するhtmlタグがあります。そこには、いくつかの建物が遠くにある小川のjpegと、背景画像の下部に配置された分割タグ（＃greengrass）によって作成された緑色の芝生があります。 div＃greengrassはコンテンツdivがその上に置かれると、下に伸びるようにスタイルされ、長くなります。周囲に罫線がある場合を除いて、不自然に実行するのはこの＃緑色の要素です。

具体的には、境界線が削除されている場合、背景画像が終了する位置に配置されていても、上に投影して背景画像を覆います。したがって、上向きに投影するとページ全体が緑色になります。しかし、それが国境を持っているとき、川の背景のイメージは、晴れの春の太陽のように明るく輝いています。

私は1つの質問があります：なぜ部門の境界の不存在または存在がその行動に影響を与えますか？ここに基礎のテストサイトへのURL：http://postmaterial.org/tests/signin-ap.phpがあります。一番上の中央に、境界線と境界線のないdiv＃greengrassエフェクトを切り替えるリンクを追加しました。私はタグの動作の理由についての手掛かりがなく、説明を感謝します。ありがとう。

Answer 1

あなたの質問に答えるには：「部門の境界の不在または存在がその行動に影響するのはなぜですか？」私は、マージンの崩壊が問題であることを彼の答えとして述べたichaoに同意する。

しかし、解決策は、余白の崩壊を防止するために必要なのは上端だけなので、border-top: 1px solid #009900だけを保持することだと思います。これにより、水平スクロールバーが表示されなくなります。

Answer 2

#greengrassの枠なしでは、その子の負の余白部分が折りたたまれて（全体が視界から外れて上方向に）引っ張られ、結果的に#greengrassはもう十分に上に押されません。

borderは、表示：インラインブロックまたは表示：表または浮動小数点数：この場合は左になります（オーバーフロー：ここでは非表示にすることはできません）。古いIEでは、zoom：1のようなhaslayoutトリガが必要です。私はそれをテストしなかった。