web-dev-qa-db-ja.com

divのマージンが重なっているのはなぜですか？また、どうすれば修正できますか？

これらの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>

picture

htmlcssmargins
73
Atif Mohammed Ameenuddin

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

2つの段落の間にスペースを入れすぎないのは非常に普通です。

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

編集：cf. W3C

次の場合にのみ、2つのマージンが隣接します。

  • どちらも同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属します
  • ラインボックス、クリアランス、パディング、境界線はありません
  • どちらも垂直方向に隣接するボックスエッジに属します

したがって、フローから要素を取り出すfloatを使用した折りたたみはありません。

76
MatTheCat

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

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

ご覧のとおり、get in touchブロックの下部マージンが入力ボックスにマージされます。これがここで有効なマージンです。もう一方のマージンである入力からの上部マージンは、実際はそうではないブロック要素に到達しないため、より小さく、実際にはプッシュバック要素ではないため、有効ではありません。 2つのマージンは重なり合っており、互いに影響しません。

44
Kissaki

パディングを使用できず、マージンが重ならないようにする必要がある場合は、次のトリックがあります。

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

デモ用にこのスニペットを起動してください：

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}
<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>
1
538ROMEO

気をつけて display: flex親要素。

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}
<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
0
squarecandy

2つのオブジェクト間に明確なdivタグを追加します

0
Richard Max