En marges de la mise en boîte

Tous les éléments nécessaires à la mise en page globale de la page sont maintenant en place.
L’architecture est terminée : nous pouvons passer à la décoration d’intérieur.
En-tête de la page
L’en-tête est un élément important de la page. Elle indique immédiatement de quoi il sera question. Il s’agira donc d’un titre de première importance. Le niveau de titre 1 conviendrait parfaitement.
• Place le curseur de texte dans la zone d’en-tête.
• Dans la liste déroulante, sélectionne le niveau de Titre 1.
Hé, Mais c’est horrible ! Voilà la couleur du bloc conteneur qui réapparaît en haut et en bas de l’entête. Qu’est-ce qu’elle vient faire là, celle-là ?
Finement observé. Mais c’était prévisible. N’oublions pas que la boîte du style H1 est entourée par cette fameuse bande de cellophane.
Quelle partie de la boîte de style H1 devrait être réduite pour ne plus laisser apparaître la couleur du  » conteneur « ?
Le contenu
L’espacement
La bordure
La marge
Nous allons devoir modifier le style  » natif  » de h1 afin de supprimer la marge existante.
• Dans l’éditeur de  style, définis une nouvelle règle de style pour  » tous les éléments correspondant au sélecteur  » h1.
• Dans l’onglet Boîte, définis les marges haute et basse à une valeur de 0.
• Vérifie l’effet obtenu dans la page : les marges transparentes ont disparu ; le fond n’est plus visible.
Le titre du texte
Chaque page de texte aura sans doute son propre titre. Afin de bien le distinguer du titre principal de la page, nous allons lui conférer le niveau Titre 2.
• Indique un titre quelconque en haut de la zone de texte, comme sur l’illustration précédente.
• Confère-lui le niveau de Titre 2.
Ca y est, c’est reparti pour un tour. Revoilà la couleur du fond qui réapparaît et la zone de texte qui se décale.
Et si c’était exactement le même problème qui se posait ici ? La marge…
• Dans l’éditeur de style, définis une nouvelle règle de style pour  » tous les éléments correspondant au sélecteur  » h2.
• Dans l’onglet Boîte, définis les marges haute à une valeur de 0.
Laisse la marge basse non définie (c’est-à-dire avec sa valeur par défaut).
• Vérifie l’effet obtenu dans la page : la marge transparente supérieure a disparu ; le fond n’est plus visible.

….

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Formation CSS (436 KO) (Cours PDF)