La marge sur l'élément enfant déplace l'élément parent

J'ai un div( parent ) qui en contient un autre div( enfant ). Parent est le premier élément bodysans style CSS particulier. Quand je mets

.child
{
    margin-top: 10px;
}

Le résultat final est que le haut de mon enfant est toujours aligné avec le parent. Au lieu que l'enfant soit déplacé de 10 pixels vers le bas, mon parent se déplace de 10 pixels vers le bas.

Mon DOCTYPEest réglé sur XHTML Transitional.

Qu'est-ce que j'oublie ici?

modifier 1
Mon parent doit avoir des dimensions strictement définies car il a un arrière-plan qui doit être affiché en dessous de haut en bas (pixel parfait). Ainsi , la mise en marges verticales il est un pas aller .

edit 2
Ce comportement est le même sur FF, IE et CR.

Vous avez trouvé une alternative dans les éléments enfants avec des marges dans les DIV. Vous pouvez également ajouter:

.parent { overflow: auto; }

ou:

.parent { overflow: hidden; }

Cela empêche les marges de s'effondrer . La bordure et le rembourrage font de même. Par conséquent, vous pouvez également utiliser les éléments suivants pour éviter un effondrement de la marge supérieure:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Mise à jour par demande populaire: L'intérêt de réduire les marges est de gérer le contenu textuel. Par exemple:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Étant donné que le navigateur réduit les marges, le texte apparaîtra comme prévu et les <div>balises wrapper n'influencent pas les marges. Chaque élément garantit un espacement autour de lui, mais l'espacement ne sera pas doublé. Les marges du <h2>et <p>ne s'additionnent pas, mais se glissent l'une dans l'autre (elles s'effondrent). La même chose se produit pour l' élément <p>et <ul>.

Malheureusement, avec des designs modernes, cette idée peut vous mordre lorsque vous voulez explicitement un conteneur. C'est ce qu'on appelle un nouveau contexte de formatage de bloc dans CSS parler. L' overflowastuce ou la marge vous le donnera.

Il s'agit d'un comportement normal (au moins parmi les implémentations de navigateur). La marge n'affecte pas la position de l'enfant par rapport à son parent, sauf si le parent a un rembourrage, auquel cas la plupart des navigateurs ajouteront alors la marge de l'enfant au rembourrage du parent.

Pour obtenir le comportement que vous souhaitez, vous avez besoin de:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Bien que toutes les réponses résolvent le problème, mais elles s'accompagnent de compromis / ajustements / compromis comme

• floats, Vous devez faire flotter les éléments
• border-top, Cela pousse le parent au moins 1px vers le bas, qui doit ensuite être ajusté en introduisant une -1pxmarge dans l'élément parent lui-même. Cela peut créer des problèmes lorsque le parent a déjà margin-topdes unités relatives.
• padding-top, même effet que l'utilisation border-top
• overflow: hidden, Ne peut pas être utilisé lorsque le parent doit afficher un contenu débordant, comme un menu déroulant
• overflow: auto, Introduit des barres de défilement pour l'élément parent qui a (intentionnellement) du contenu débordant (comme des ombres ou un triangle de l'info-bulle)

Le problème peut être résolu en utilisant les pseudo-éléments CSS3 comme suit

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

ajouter du style display:inline-blockà l'élément enfant

l'élément parent ne doit pas être vide au moins placé  avant l'élément enfant.

C'est ce qui a fonctionné pour moi

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Je découvre que, à l'intérieur de votre .css> si vous définissez la propriété d'affichage d'un élément div sur inline-block, cela résout le problème. et la marge fonctionnera comme prévu.

Solution soignée CSS uniquement

Utilisez le code suivant pour ajouter un premier enfant sans contenu à la div qui se déplace involontairement:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

L'avantage de cette méthode est que vous n'avez pas besoin de modifier le CSS d'un élément existant et qu'elle a donc un impact minimal sur la conception. À côté de cela, l'élément qui est ajouté est un pseudo-élément, qui n'est pas dans l'arbre DOM.

La prise en charge des pseudo-éléments est très répandue: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ et IE 8+. Cela fonctionnera dans n'importe quel navigateur moderne (soyez prudent avec le plus récent ::before, qui n'est pas pris en charge dans IE8).

Le contexte

Si le premier enfant d'un élément a un margin-top, le parent ajustera sa position pour réduire les marges redondantes. Pourquoi? C'est comme ça.

Étant donné le problème suivant:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Vous pouvez le corriger en ajoutant un enfant avec du contenu, tel qu'un simple espace. Mais nous détestons tous ajouter des espaces pour ce qui est un problème de conception uniquement. Par conséquent, utilisez la white-spacepropriété pour simuler du contenu.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Où position: relative;assure un positionnement correct du correctif. Et white-space: pre;vous évite d'ajouter du contenu - comme un espace blanc - au correctif. Et height: 0px;width: 0px;overflow: hidden;s'assure que vous ne verrez jamais le correctif.

Vous devrez peut-être ajouter line-height: 0px;ou max-height: 0px;vous assurer que la hauteur est réellement nulle dans les anciens navigateurs IE (je ne suis pas sûr). Et éventuellement, vous pouvez l'ajouter <!--dummy-->dans les anciens navigateurs IE, si cela ne fonctionne pas.

En bref, vous pouvez faire tout cela avec seulement CSS (ce qui supprime la nécessité d'ajouter un enfant réel à l'arborescence DOM HTML):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Pour empêcher "Div parent", utilisez la marge de "div child":
Dans parent, utilisez ces CSS:

• Flotte
• Rembourrage
• Frontière
• Débordement

Les marginéléments contenus à l'intérieur .childs'effondrent.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

Dans cet exemple, preçoit un margindes styles par défaut du navigateur. La valeur par défaut du navigateur font-sizeest généralement de 16 pixels. En ayant un margin-topde plus de 16px sur #childvous commencez à remarquer son mouvement de position.

J'ai aussi eu ce problème mais j'ai préféré éviter les hacks de marges négatives, j'ai donc mis un

<div class="supercontainer"></div>

autour de tout ce qui a des rembourrages au lieu de marges. Bien sûr, cela signifie plus de divitis, mais c'est probablement le moyen le plus propre de le faire correctement.

Fait intéressant, ma solution préférée à ce problème n'est pas encore mentionnée ici: l'utilisation de flotteurs.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

voir ici: http://codepen.io/anon/pen/Iphol

notez que si vous avez besoin d'une hauteur dynamique sur le parent, il doit également flotter, remplacez simplement height:100px;parfloat:left;

Une solution alternative que j'ai trouvée avant de connaître la bonne réponse était d'ajouter une bordure transparente à l'élément parent.

Votre boîte utilisera cependant des pixels supplémentaires ...

.parent {
    border:1px solid transparent;
}

Utiliser à la topplace de margin-topest une autre solution possible, le cas échéant.