CSS : supprimer les marges du corps

Question

Je suis nouveau dans le développement Web et j'ai du mal à supprimer les marges du corps.

Il y a un espace entre le haut du navigateur et le texte du « logo ». Mon code est sur jsbin.

Si je veux supprimer des espaces, body { margin: 0;} est-ce faux ?

Answer 1

Certains éléments HTML ont des marges prédéfinies (ex : body、h1 到 h6、p、 >fieldset、form、ul、ol、dl、dir >、菜单、块引用和dd).

Dans votre cas, oui h1 导致了您的问题。默认情况下它具有 { margin: .67em } . Si vous le définissez sur 0, cela supprimera les espaces.

Pour résoudre ce genre de problème, je vous recommande d'utiliser les Outils de développement de votre navigateur. Pour la plupart des navigateurs : cliquez avec le bouton droit sur l'élément sur lequel vous souhaitez en savoir plus et sélectionnez "Inspecter l'élément". Tout en bas de l’onglet Styles, vous disposez d’un modèle de boîte CSS. Il s'agit d'un excellent outil pour visualiser les bordures, le remplissage et les marges, ainsi que les éléments à l'origine de vos problèmes de style.

Answer 2

Je dirais que l'utilisation d'une réinitialisation globale est un moyen terrible de résoudre ce problème.

* {
  margin: 0;
  padding: 0;
}

La raison pour laquelle les marges h1 apparaissent du parent est que le parent n'a pas de remplissage.

Si vous ajoutez un remplissage à l'élément parent de h1, la marge sera à l'intérieur de l'élément parent.

Réinitialiser tous les remplissages et marges à 0 peut provoquer de nombreux effets secondaires. Il est alors préférable de supprimer les marges pour ce titre particulier.