Pourquoi `body { margin: 0; }` Supprimer la marge supérieure de mon logo ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-12-28 08:54:10

original

167 Les gens l'ont consulté

Why Isn't `body { margin: 0; }` Removing My Logo's Top Margin?

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;
}

Copier après la connexion

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 :

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

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

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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!