Pourquoi `body { margin: 0; }` Supprimer la marge supérieure de mon logo ?

Dépannage de la suppression des marges dans CSS

Lorsqu'ils rencontrent des problèmes de marge dans le développement Web, les programmeurs débutants peuvent se demander si la règle CSS suivante est appropriée :

body {
  margin: 0;
}

Problème Déclaration

L'application du code ci-dessus pour éliminer l'espacement entre le haut du navigateur et le texte du « logo » s'avère infructueuse. Le code suivant est disponible pour référence sur jsbin :

  <style>
    body {
      margin: 0;
    }
  </style>



  <div class="logo">
    <h1 id="Logo">Logo</h1>
  </div>

Réponse

Bien que la règle CSS fournie soit destinée à supprimer la marge du corps, ce n'est peut-être pas le cas. solution idéale dans ce scénario. Utiliser une réinitialisation globale comme celle-ci :

* {
  margin: 0;
  padding: 0;
}

peut avoir des conséquences inattendues. Dans ce cas particulier, la marge du titre « logo » dépasse de son élément parent en raison de l'absence de remplissage dans le parent.

Une approche plus ciblée est recommandée :

.logo {
  padding: 10px;
  margin: 0;
}

Définir le le remplissage du parent garantit que la marge du « logo » reste à l'intérieur du parent. La suppression de toutes les marges et remplissages peut avoir des effets imprévus, ce qui rend préférable de se concentrer sur l'élément spécifique plutôt que de recourir à une réinitialisation globale.

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!