web-dev-qa-db-fra.com

Pourquoi mes marges div se chevauchent et comment puis-je y remédier?

Je ne comprends pas pourquoi les marges de ces divisions se chevauchent.

.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

Je pense que c'est une marge effondrée. Seule la plus grande marge entre le bas du premier élément et le haut du second est prise en compte.

Il est tout à fait normal de ne pas avoir trop d'espace entre deux paragraphes, par exemple.

Vous ne pouvez pas éviter cela avec deux éléments adjacents, vous devez donc agrandir ou réduire la plus grande marge.

EDIT: cf. W3C

Deux marges sont contiguës si et seulement si:

  • les deux appartiennent à des boîtes de niveau bloc in-flow qui participent au même contexte de formatage de bloc
  • pas de boîtes de ligne, pas de dégagement, pas de rembourrage et pas de bordure les séparent
  • les deux appartiennent à des bords de boîte adjacents verticalement

Il n'y a donc pas d'effondrement avec float qui retire l'élément du flux.

76
MatTheCat

Les marges, contrairement au rembourrage (qui rembourre une largeur spécifique) est un "faire cela comme une distance minimale".

Cela ne mettra pas cette distance à tous les éléments.

Comme vous pouvez le voir, la marge inférieure du bloc entrer en contact est alignée dans la zone de saisie. C'est la marge active ici. L'autre marge, la marge supérieure de l'entrée, n'est pas en vigueur, car elle est plus petite et n'atteint pas un élément de bloc où elle serait en fait repousser l'élément. Les 2 marges se chevauchent et ne s’affectent pas.

44
Kissaki

Si vous ne pouvez pas utiliser de rembourrage et que vous avez vraiment besoin que la marge ne se chevauche pas, voici une astuce:

.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;
}

Veuillez lancer cet extrait de démo:

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

Attention à display: flex sur l'élément parent.

.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

Ajoutez une balise div claire entre les deux objets

0
Richard Max