L'essentiel des CSS

Gérer la fusion des marges

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les éléments situés dans le flux de lecture du navigateur vont se fusionner au niveau des marges. Cette fusion ne s'opère qu'uniquement dans le sens vertical.
02:58

Transcription

Une particularité des marges vient du fait qu'elles vont se fusionner lorsqu'elles vont être en contact uniquement verticalement. Les marges horizontales ne se fusionnent pas mais les marges verticales vont se fusionner. Regardons par exemple si je prends trois éléments de type p qui se suivent, qui possèdent une largeur de 200px, avec un box-sizing sur le border-box donc on a bien 200px tout autour d'eux. On a une largeur de marge de 50px tout autour de l'élément. Une bordure tout autour de 50px également, le padding : pas besoin. Donc les éléments de type block se suivent, vous voyez que bien qu'ils aient 50px chacun tout le tour on n'a que 50 px de marge ici. En fait, on aurait pu penser qu'on aurait 50 + 50 = 100px. Si maintenant on se met à faire flotter les éléments entre eux, regardez, les éléments vont flotter. Ils vont sortir de l'élément de flottaison vous avez vu que puisqu'ils flottent ils se retrouvent cette fois-ci à 100 px l'un de l'autre. Par contre, regardez, au niveau de la partie haute, il y a aussi 100px. C'est à dire qu'ils sont sortis du flux. Leurs marges, sont comme des auto-tamponneuses avec le caoutchouc autour qui se touchent et qui vont bord à bord. Il n'y a plus cette fusion des marges. Ici, je reviens sur une anti-flottaison. Si maintenant dans l'élément précédent je vais lui dire : « je te positionne sur un margin-bottom de 25px, » donc on est inférieurs à cette histoire de 50 px. Que nenni. Lui, il est toujours à 50px, donc c'est 50 px qu'il prend. Si par contre, je viens ici sur un margin-top de 10 px lui est inférieur, le suivant va passer à 25 px. Pourquoi ? Parce que le premier a une marge de 25px. Si maintenant je passe à 100 px, ici j'enregistre. On voit bien qu'on sort sur 100 px. Attention ! Si on refait flotter nos éléments ici, ctrl+S cette fusion des marges n'existe pas. On a bien sur le suivant, là on est sur le margin-top on va revenir en margin tout court. Je vais commenter ça pour que vous puissiez les garder dans les fichiers de test, ici. Je vais revenir sur cet élément-là. Ici, si je reviens en margin tout court de 100px. J'enregistre. Pensez au point virgule. Si j'actualise, on a bien... Décidément... J'ai écrit encore une fois margin-top, je ne sais pas pourquoi... ctrl+S On a bien nos 100 px. Vous avez vu, il est passé directement dessous. On a 125 puisque rappelez-vous le margin-bottom est à 25, par contre si je viens ici que j'ouvre la flottaison, elle est bien à 150. Donc le 125 ici, 150 sur le côté droit parce qu'il y a cette histoire de non-fusionnage des marges dans la mesure où on est sur des éléments qui sortent du flux.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :28 avr. 2016
Durée :5h09 (54 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !