Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Empêcher les fusions de marge

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe un mécanisme automatique mis en place par les navigateurs. Il s'agit de fusionner les marges, ce qui peut parfois causer problème. Examinez-en sont les causes et étudiez comment y remédier.
04:35

Transcription

Lorsqu'on a plusieurs blocs qui se suivent, on peut avoir dès fois, besoin de gérer les fusions automatiques de marge. Donc, par exemple ici, on voit que j'ai 4 blocs qui se suivent, 4 paragraphes ici tout simplement, et ces 4 paragraphes possèdent un margin et un padding de 50 pixels. Donc ici, on a 50 pixels, les marges ne s'ajoutent pas, bien entendu, parce qu'elles se fusionnent et donc tous les blocs se fusionnent. On pourrait avoir besoin de stopper cette fusion. Donc je vais créer une classe ici, qui va s'appeler stopfusion. Et cette classe stopfusion, je vais la récupérer ici pour pouvoir dire, eh bien à cet endroit-là je vais faire un display par exemple inline, et dès l'instant où je fais un display : inline-block, si j'actualise ma page, on voit qu'automatiquement que la fusion des marges s'arrête et donc on a bien l'addition des 2 marges, marge basse et marge haute. Ce qu'il faut voir aussi, et faire attention, c'est que si je déplace cette classe ici à l'élément précèdent ici donc cet élément, celui-là, n'est pas concerné par cette fusion. Oui mais attention, lui il est concerné. Et donc automatiquement, on a sa marge haute qui ne s'additionne pas avec la marge basse de lui et sa marge basse qui ne se fusionne pas avec l'élément qui le suit. Donc voilà, faites bien attention ! Donc si par exemple... C'est pas parce que lui n'est pas affecté par ça, c'est lui qui l'affecte, c'est à dire que si je décale maintenant cet élément ici, à l'élément précèdent ici, on voit bien que ça décale la problématique. On a aussi dès fois, des marges qui sont affectées cette fois-ci, et on ne voudrait pas l'affecter. Et donc c'est pas à faire un stop-fusion, au contraire, c'est rétabli fusion. Donc ici, j'ai un élément de section qui ne possède pas du tout d'élément, c'est juste le margin-top de cet élément h1 qui devrait être appliqué à cet élément. Mais lui le 100 pixels du h1 ici, va s'appliquer en dehors de la section et donc, automatiquement, va affecter la fusion basse et la fusion haute de cet élément. C'est à dire la fusion basse des p ici qui eux possèdent un margin de 50 pixels et la section elle n'a aucune marge c'est le h1 qui a la marge. Donc comment peut-on régler ça ? Alors il y a 2 approches, 2 écoles, qui sont autant intéressante l'une que l'autre, c'est de placer un padding par exemple ici un padding-top ou un padding général comme... tout va dépendre... C'est à dire que plaçons-le de manière générale, on pourrait dire que la section possède un padding de 1 pixel et dès l'instant où on va appliquer un padding de 1 pixel à cette section, automatiquement elle, elle va récupérer la marge haute de ce h1 ici et casser la fusion qu'elle avait avec le prédécesseur. Alors ça c'est une première approche ici. On a une seconde approche, qui pourrait être de dire, j'ai pas de padding et je ne veux pas de padding à l'intérieur de ma section. Donc, comment pourrais-je gérer ça ? Eh bien en fait... Alors, je vais enregistrer et actualiser pour remettre donc la problématique ici et on pourrait dire, je vais mettre un border-top ici de 1 pixel solid et je vais mettre une couleur transparente pour qu'il n'y ait pas d'aléa d'artefact qui se mette avec mais quoi qu'il en soit je ne veux pas cette bordure non plus mais ce que je vais faire c'est de pouvoir faire un margin-top ici puisque dans la fusion automatiquement on va compter ce pixel en plus. margin-top qui sera cette fois-ci de -1 pixel ici et donc si j'enregistre ici et que j'actualise ma page, on voit bien que on n'a pas le border-top puisqu'il a été englouti. Il ne tient pas compte non plus du 1 pixel de plus et ici on a bien récupéré notre h1 qui possède le 100 pixels. Une troisième possibilité va être dès fois de se dire, on a des éléments qui s'auto-fusionnent entre eux puisqu'ils se suivent, ce sont que des div, il y a plusieurs div ici les uns à la suite des autres qui ont une marge de 50 pixels et qui donc fusionnent leur marge. La manière de pouvoir arrêter les marges aussi, alors c'est pas à porter à tous les cas, mais c'est de faire flotter l'élément. Dès l'instant où l'élément va flotter, si j'actualise, on voit bien que tous les éléments se mettent à flotter mais du coup, il n'y a plus de fusion de marge, ni à droite, ni à gauche, ni en haut ni en bas, tous les éléments vont automatiquement cumuler leur marge latérale ou leur marge haute et basse. Donc plusieurs manières, de pouvoir contrecarrer, soit l'automatisme, soit certains mécanismes qui ne nous conviendraient pas, on le voit par exemple avec des éléments encapsulés pour pouvoir gérer ces fusions de marge.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

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 !