87

これらの div の余白が重なっている理由がわかりません。

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}
<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

写真

4

5 に答える 5

81

潰れたマージンだと思います。最初の要素の下部と 2 番目の要素の上部の間の最大マージンのみが考慮されます。

2 つの段落の間にスペースがあまりないのはごく普通のことです。

隣接する 2 つの要素ではそれを避けることができないため、より大きな余白を拡大または縮小する必要があります。

編集：参照。W3C

次の場合に限り、2 つのマージンが隣接しています。

  • 両方とも、同じブロック フォーマット コンテキストに参加するインフロー ブロック レベル ボックスに属します。
  • ラインボックスなし、クリアランスなし、パディングなし、ボーダーなしでそれらを分離
  • どちらも垂直方向に隣接するボックス エッジに属します

floatそのため、要素をフローから除外する崩壊はありません。

于 2010-10-11T13:45:20.940 に答える
50

パディング（特定の幅をパディングする）とは対照的に、マージンは「最小距離としてこれを行う」ことです。

すべての要素にその距離を置くわけではありません。

ご覧のとおり、タッチブロックの下部マージンは入力ボックスに結合されています。それがここでアクティブなマージンです。もう一方のマージンである入力からの上部マージンは、小さく、実際に要素を押し戻すブロック要素に到達しないため、有効ではありません。2つのマージンは重なり合っており、互いに影響を及ぼしません。

于 2010-10-11T13:49:05.937 に答える