Comment éliminer les marges inattendues au-dessus d'un en-tête en HTML et CSS ?

Élimination des marges indésirables autour des en-têtes

Pour tenter de minimiser l'espace indésirable au-dessus d'un en-tête, un extrait HTML et CSS a été introduit :

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1>OQ Online Judge</h1>
  <form action="<?php echo base_url(); ?> /index.php/base/si" method="post">
    <label for="email1">E-mail : </label>
    <input type="text" name="email">

Malgré la définition des marges du et éléments à zéro, une marge non nulle apparaît toujours. Cet espace énigmatique naît de l'effondrement des marges.

Comprendre l'effondrement des marges

L'effondrement des marges se produit lorsque certains éléments avec des marges adjacentes s'effondrent en une seule marge. Ceci est couramment observé avec les éléments dans les conteneurs au niveau du bloc. Dans ce cas, le champ et Les éléments sont tous deux des éléments de niveau bloc.

Solution : application d'une marge à un élément d'en-tête spécifique

Pour éliminer la marge indésirable, appliquez une marge de zéro à l'élément spécifique. élément d'en-tête à l'origine du problème. Dans ce cas, il s'agit du paramètre

élément dans l'en-tête.

h1 {
    margin-top: 0;
}

En définissant la propriété margin-top de l'élément

élément à zéro, l'effondrement de la marge est interrompu et l'espace indésirable au-dessus de l'en-tête est éliminé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!