Bonjour à tous. je viens de rejoindre votre forum.

Plamen13 Messages postés 3 Date d'inscription lundi 16 septembre 2024 Statut Membre Dernière intervention 16 septembre 2024 - Modifié le 16 sept. 2024 à 17:42
Plamen13 Messages postés 3 Date d'inscription lundi 16 septembre 2024 Statut Membre Dernière intervention 16 septembre 2024 - 16 sept. 2024 à 18:12

J'ai une question vraiment élémentaire. Je ne comprends pas un affichage qui normalement ne devrait pas se produire. Je voudrais vous soumettre ces quelques lignes de code si quelqu'un peut m'expliquer pourquoi cela se produit-il.

Le problème est le suivant:

Le titre h1 s'affiche avec un bandeau vert au dessus correspondant au fond du <html>

Mais si j'ajoute une bordure en décochant l'instruction en remarque dans la règle de body le bandeau disparait.

Pourquoi il y a ce bandeau dans le premier cas et pourquoi il disparait dans le second?

Voici le code :

<!DOCTYPE html>
<html lang="fr">					
   <head>				
      <meta charset="UTF-8">
      <title>Essai</title>
      <style> 
         * {
            margin: 0;
            padding: 0;
         }       
         html {
         	background-color:  green;
         }      
         body {                                 
            background-color:  #333;
            height: 300px; 
         	/*border: 5px solid red;*/
         }  
			h1 {                            
				color: #f1f1f1;
				text-align: center;           
				font-size: 60px;
				margin-top: 50px;
			}
       </style>    
   </head>
   <body>
  		<h1>Titre H1</h1>
   </body>
</html>

Merci 

1 réponse

Plamen13 Messages postés 3 Date d'inscription lundi 16 septembre 2024 Statut Membre Dernière intervention 16 septembre 2024
16 sept. 2024 à 18:12

Autant pour moi...

J'ai été étourdi et j'ai écrit margin en pensant à padding sans me rendrecompte de mon erreur. Evidament avec padding il n'y a plus de bandeau vert au-dessus du titre.

Mais j'y pense pourquoi le fait de mettre une bordure à body annulait  l'effet du margin?

0