1

http://christianselig.com/wp

margin-top: 50px基本的に大きな挨拶の画像である.greetingクラスdivに設定しました。ただし、何らかの理由で、接続されていなくても、何らかの理由で前のnav要素を下にドラッグします。

私のメインサイトhttp://christianselig.comには、（Wordpressの実装なしで）それがあるので、ここで何が違うのか混乱しています。

4

4 に答える 4

1

マージン崩壊

要素に上部境界線がなく、上部パディングがなく、子にクリアランスがない場合、インフロー ブロック要素の上マージンは、最初のインフロー ブロック レベルの子の上マージンで折りたたまれます。

全体的に単純化しすぎると、次のようになります。

  • 兄弟要素 (上下) 間の余白は、大きい方の余白のサイズに縮小されます。
  • パディングまたはボーダーがない場合、祖先/子孫要素間の同じ方向 (上と下) のマージンは、より大きなマージンのサイズに折りたたまれます。
于 2012-11-30T04:46:25.917 に答える
1

このCSSに使用し てヘッダーをクリアしますid 

#masthead.site-header:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

結果は

ここに画像の説明を入力

于 2012-11-30T04:48:03.903 に答える
0

すべての#masthead子 (この場合は 1 つだけ) がフローティングであるため、 は折りたたまれており、レイアウトプロパティが失われています。

これを追加：

#masthead {
    overflow: hidden;
}

または、ルール内のfloatプロパティを削除し、代わりに置き換えます。とにかくこれが浮いているべき理由がわかりません。.main-navigationoverflow: hidden;

于 2012-11-30T04:48:02.797 に答える
0

マージンの崩壊が原因ですが、メインコンテンツのマージンがその<header>上の要素と一緒に崩壊しているため、やや直感的ではありません. これは、ヘッダー ( #masthead) の高さがゼロになるために発生します。これを修正するoverflow:hiddenには、#mastheadheader 要素に追加するだけです。

#masthead { overflow:hidden; }

これにより、#masthead が展開されて含まれる浮動nav要素が含まれるようになり、マージンが #masthead ヘッダーに折りたたまれるのを防ぐことができます。

于 2012-11-30T04:51:43.773 に答える