web-dev-qa-db-fra.com

Supprimer la marge du corps en CSS

Je suis novice en développement Web et j'ai rencontré un problème lors de la suppression de la marge corporelle. 

There's space between the very top and "logo" Il y a un espace entre le sommet du navigateur et le texte du "logo". Et mon code est ici sur jsbin .

body { margin: 0;} est-il faux si je souhaite supprimer cet espace?

htmlcssmarginspace
20
piskebee

Je dirais que l'utilisation de:

* {
  margin: 0;
  padding: 0;
}

est une mauvaise façon de résoudre ce problème.

La raison pour laquelle la marge h1 saute hors du parent est que le parent n'a pas de remplissage.

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

Réinitialiser tous les marges et les marges à 0 peut provoquer de nombreux effets secondaires. Ensuite, il est préférable de supprimer la marge supérieure pour ce titre spécifique.

24
andeersg

Je vous recommande de réinitialiser tous les éléments HTML avant d'écrire votre css avec: 

* {
    margin: 0;
    padding: 0;
}

Après cela, vous pouvez écrire votre css personnalisé sans aucun problème. 

3
Spawn

Vous avez encore une marge sur votre tag h1

Donc, vous devez supprimer cela comme ceci:

h1 {
 margin-top:0;
}
2
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Le problème concerne la marge d'en-tête h1. Vous devez essayer ceci:

h1 {
 margin-top:0;
}
1
Rahul Tripathi

Cela devrait vous aider à vous débarrasser des marges du corps et de la marge supérieure par défaut de la balise <h1>.

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

h1 {
        margin-top: 0px;
    }
1
Mladen Oršolić

Vous pouvez utiliser body ou * pour créer une marge et un remplissage 0px;

*{
margin: 0px;
padding:0px;
}
0
Vinayak

La bonne réponse à cette question est "css reset".

* {
    margin: 0;
    padding: 0;
}

Il supprime toutes les marges et marges intérieures par défaut pour chaque objet de la page, sans interdiction d’interdiction, quel que soit le navigateur.

0
Darian

J'ai trouvé ce problème persistant même en réglant la marge du corps à zéro.

Cependant, il s'avère qu'il existe une solution facile. Tout ce que vous avez à faire est de donner à votre balise HEADER une bordure de 1px, ainsi que de régler la marge du corps à zéro, comme indiqué ci-dessous.

body { margin:0px; }

header { border:1px black solid; }

Vous pouvez également avoir besoin de changer la marge à zéro pour tout élément H1, H2, etc. que vous avez dans votre division HEADER. Cela éliminera tout espace supplémentaire pouvant apparaître autour du texte.

Vous ne savez pas pourquoi cela fonctionne, mais j'utilise le navigateur Chrome. Évidemment, vous pouvez également changer la couleur de la bordure pour qu'elle corresponde à celle de votre en-tête.

0
wardheed