Discussion :

[vidia]

Bonjour tout le monde, nommons div1 et div2 2divisions:
div2 est fils de div1, je souhaite placé div2 a une position vers le centre de div1, j'applique donc une largeur a div1 et un margin auto pour le placement horizontal.
Mais pour le placement vertical, j'utilise un margin top uniquement, et la problème:
Si je ne met pas de bordure a div1, l'ensemble div1div2 est repoussé verticalement vers le bas par rapport a mon header.
Si je met une bordure a div1, tout va bien, j'ai entendu parlé d'une collision de bordure mais je ne comprend pas bien l'origine de ce bug, si quelqu'un pourrais me donner une explication technique ou m'indiquer une erreur que j'aurais faite :
Des exemples sont disponibles ici :
https://jsfiddle.net/9uanbce5/2/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.div1{
  background-color: blue;
  height: 40vh;
  /*border:solid 1px black;*/
}

Retirez les /**/ et faites run s'il vous plait.
Merci pour votre aide.

[NoSmoking]

Bonjour,
les éléments de type block et qui sont dans le flux présentent la particularité de fusionner leurs marges verticales pour n'en faire qu'une, la plus grande. Cela se nomme la fusion des marges.

L'utilité est d'harmoniser les espaces entre chaque éléments, espaces identiques.

Si cette fusion des marges nuit à ton rendu il existe plusieurs façons de s'en affranchir et notamment la mise en place d'une bordure sur le parent, ce que tu as trouvé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.parent {
  border: 1px solid transparent;
}

D'autres méthodes existent comme
• mettre un padding de 1px, sur le parent, mais attention un padding de 0 ne fera strictement rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.parent {
  padding-top: 1px;
}

• mettre un caractère entre le parent et l'enfant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>&nbsp;
  <p>Texte du paragraphe</p>
</div>

ce n'est pas top pour la maintenance.

• comme ton élément parent possède une hauteur, donc tu maitrise ce que tu veux faire, tu peux également lui mettre un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.parent {
  overflow: hidden;
}

d'autres problèmes pourraient surgir.

• avec l’avènement des « flex boxes » tu peux également supprimer cette fusion de marges en déclarant le parent comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.parent {
  display: flex;
  flex-direction: column;
}

Voilà rapidement exposée la fusion des marges.


Un peu de lecture entre bien d'autres

• Fusion des marges sur MDN
• 8.3.1 Collapsing margins

[vidia]

Bonsoir, NoSmoking, un grand merci a toi d'avoir pris le temps de m'expliquer en détail ce mécanisme .
Tout fonctionne maintenant comme voulu, et je sais dorénavant qu'un élément block imbriqué dans un élément block fusionnent leurs marges.
Je met donc le sujet en résolu et j'espère que cela pourra servir à d'autres.