web-dev-qa-db-fra.com

La marge CSS en haut de <h1> affecte la marge du parent

Cela fait un moment que je regarde ce problème et n’ai pas trouvé de réponse claire. Lors de l'ajout d'un haut de marge à un élément, dans mon cas, cela se produit principalement avec des en-têtes. Très souvent, le haut de la marge est partagé avec le parent.

HTML

  <div>
      <h1>My title</h1>
    </div>

CSS

div{
  padding:20px;
}

h1{
 margin-top: 20px;
}

Le résultat du code précédent ajoutera également une marge supérieure à la div, comme si nous avions les éléments suivants:

div{
  padding:20px;
  margin-top:20px; /*this one is implemented by the browser, not written on the code*/
}

Un moyen de résoudre ce problème consiste à ajouteroverflow:autoau parent, dans ce cas le div css a:

div{
  padding:20px;
  overflow:auto;
}

Bien que l'exemple précédent résolve le problème, il ne m'est pas clair POURQUOI ??? . Cela a quelque chose à voir avec "la réduction des marges" , où une marge est apparemment combinée à la marge du parent. Mais pourquoi ????

Comment pouvons-nous savoir quand un parent va réduire la marge de l'enfant et quand non, quel est le but de cette propriété des blocs ou s'agit-il d'un bogue?

Voici un démo JSFiddle du problème.

Et voici un démo JSFiddle de la solution

Merci.

cssmargin
24
multimediaxp

Merci à tous pour vos réponses, @ gaurav5430 a posté un lien avec une définition très précise que je voudrais résumer dans cette réponse. En ce qui concerne la raison pour laquelle ils ont décidé que ces éléments devaient se comporter de la sorte, cela n’est pas encore clair pour moi; mais au moins nous avons pu trouver une règle qui s'applique aux marges réductrices:

"En termes simples, cette définition indique que, lorsque les marges verticales de deux éléments se touchent, seule la marge de l’élément avec la plus grande valeur de marge sera honorée, tandis que la marge de l’élément avec la plus petite valeur de marge sera réduite. à zéro

Fondamentalement, dans notre exemple sur la question initiale, la plus grande marge supérieure est celle du <h1> donc prise et appliquée au parent <div>.

Cette règle est annulée pour:

  • Éléments flottants
  • Éléments absolument positionnés
  • Eléments de bloc en ligne
  • Les éléments dont le dépassement est défini sur autre chose que visible (Ils ne réduisent pas les marges avec leurs enfants.)
  • Éléments effacés (ils ne réduisent pas leurs marges supérieures avec la marge inférieure de leur bloc parent.)
  • L'élément racine

C’est la raison pour laquelle overflow:hidden a résolu le problème.

Merci @ gaurav5430; voici la référence: http://reference.sitepoint.com/css/collapsingmargins

Merci également à @Adrift qui a publié de très bonnes ressources, bien que j'ai trouvé la réponse de @ gaurav5430 plus simple et plus compréhensible.

20
multimediaxp

Si element est le premier enfant, il ajoutera le haut de la marge à l'élément parent, en se réduisant avec le haut de la marge de l'élément parent.

La pourquoi parfois la marge ne s'effondre pas est clairement indiquée dans W3 section effondrement-marges .

Je recommande l'utilisation de padding-top ou de cette solution de contournement: La marge sur l'élément enfant déplace l'élément parent , étant donné que overflow: hidden peut ajouter des dommages collatéraux.

voir cet exemple: fiddle

HTML:

<div id="outside">
    <div id="div1">
        <h1>margin in parent</h1>
    </div>

    <div id="div2">&nbsp;
        <h1>margin inside</h1>
    </div>
</div>

CSS:

#outside {
    background-color: #ccc;
    border:1px solid #000;
}
#div1 {
  background-color: #66d;
}
#div1 h1 {
  margin: 20px 0 0 0;
}
#div2 {
  background-color: #6d6;
}
#div2 h1 {
  margin: 20px 0 0 0;
}
5
Andre Figueiredo

voici un article de Nice, avec une légère explication

http://reference.sitepoint.com/css/collapsingmargins

trouvez ceci sur le lien ci-dessus ...

Réduire les marges entre les éléments parent et enfant

Jusqu’à présent, nous n’avons traité que de l’effet de fusion sur .__ adjacent. éléments, mais le même processus s’applique aux parents et aux enfants dont les marges se touchent. Par «toucher», nous entendons les endroits où no des marges intérieures, des bordures ou du contenu existent entre les marges adjacentes. Dans Dans l'exemple suivant, un élément parent a un élément enfant sur lequel un la marge supérieure est définie:

h1 {marge: 0; arrière-plan: #cff; } div {margin: 40px 0 25px 0; arrière-plan: #cfc; } p {margin: 20px 0 0 0; arrière-plan: # cf9; } Dans la feuille de style ci-dessus, vous pouvez voir qu'une valeur de marge supérieure est déclarée pour l'élément p, et dans l'extrait de code ci-dessous, vous pouvez voir que le L'élément p est un enfant de l'élément div:

Contenu du titre

Contenu du paragraphe

Le Le résultat de ce code est illustré à la figure 2.</ p>

Figure 2. Réduction des marges sur un paragraphe enfantUne illustration de réduire les marges entre un élément h1 et un élément div avec un élément enfant p. Il y a une verticale de 40 pixels écart entre l'élément h1 et le contenu du paragraphe. Vous vous attendiez peut-être à ce que le paragraphe se trouve à 60px du cap, puisque l’élément div a une marge supérieure de 40px et qu’il existe un encore 20px margin-top sur l’élément p. Vous avez peut-être aussi prévu que 20px de la couleur de fond de l'élément div montrerait ci-dessus le paragraphe. Cela ne se produit pas parce que, comme vous pouvez le voir sur la figure 2, les marges se réduisent pour former une seule marge. Seulement le plus grand la marge s’applique (comme dans le cas des blocs adjacents), comme nous l’avons déjà fait vu.

En fait, nous obtiendrions le même résultat si notre élément div n’avait pas de sommet la marge et l’élément p avaient un sommet de marge de 40px. Le bord supérieur 40px sur l'élément p devient effectivement la marge supérieure de l'élément div, et pousse le div en bas de la page de 40px, laissant l'élément p imbriquant confortablement au sommet. Aucun fond ne serait visible sur la div élément au-dessus du paragraphe. ...

1
gaurav5430

résoudre le problème de débordement: auto; ça ne va pas, as-tu essayé de donner un identifiant ou une classe à ton div et ensuite le faire dans ton CSS

#divID{
padding:auto;
}

#divID h1{
margin-top: 20px;
}

ne jamais utiliser de débordement, car cela pourrait vous causer plus de problèmes si vous ajoutez un SELECT dans votre DIV, bonne chance

Il existe trois façons différentes en CSS de dicter les éléments à styler. Chacune de ces méthodes est utile pour un ensemble spécifique d'objectifs, mais en utilisant les trois ensemble, vous pouvez vraiment exploiter la puissance en cascade des feuilles de style. Les trois méthodes de description des objets sur une page sont leur nom de balise, leur ID ou leur classe.

0
Jeffery ThaGintoki