web-dev-qa-db-fra.com

Comment puis-je supprimer de l'espace au-dessus de l'en-tête?

Je crée un site web. J'ai écrit la partie html et maintenant j'écris la feuille de style. Mais il y a toujours de la place pour mon en-tête. Je ne peux pas l'enlever. 

Mon code HTML et CSS est donné ci-dessous.

<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" id="email1">
  <label for="password1">Password : </label><input type="password" name="password" id="password1">
  <input type="submit" name="submit" value="Login">
 </form>
</header>

Ceci est mon code HTML.

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

Ceci est mon code CSS.

csshtml5
20
eddard.stark

Essayer:

h1 {
    margin-top: 0;
}

Vous voyez les effets de l’effondrement de la marge .

48
robertc

Essayez margin-top:

<header style="margin-top: -20px;">
    ...

Modifier:

Maintenant, j'ai trouvé la position relative probablement un meilleur choix:

<header style="position: relative; top: -20px;">
    ...
8
benbai123

Lorsque vous commencez à créer un site Web, il est recommandé de réinitialiser toutes les marges et les rembourrages. Je recommande donc au début de faire simplement:

* { margin: 0, padding: 0 }

Ainsi, les marges et les marges de remplissage de tous les éléments seront égales à 0. Vous pourrez ensuite les personnaliser à votre guise, car chaque navigateur a une marge et des marges de remplissage par défaut différentes. 

6
Панайот Толев

J'ai résolu le problème de l'espace en ajoutant une bordure et en supprimant, en définissant une marge négative. Je ne sais pas quel est le problème sous-jacent.

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}
3
Patrick van Efferen

Pour éviter des marges inattendues et d'autres comportements spécifiques au navigateur, nous vous recommandons d'inclure reset.css dans vos feuilles de style.

Sachez que vous devrez définir la taille et le poids de la police h [1..6] pour que les en-têtes ressemblent de nouveau aux en-têtes et à bien d’autres choses encore.

2
D_4_ni

Pour compléter, changez overflow en auto/hidden.

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

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
  overflow: auto;
}
<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" id="email1">
    <label for="password1">Password :</label>
    <input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>

2
yckart

C'est probablement la balise h1 à l'origine du problème. L'application de margin: 0; devrait résoudre le problème.

Toutefois, vous devez utiliser une réinitialisation CSS pour chaque nouveau projet afin d’éliminer les problèmes de cohérence du navigateur et les problèmes similaires. Le plus célèbre est probablement Eric Meyer: http://meyerweb.com/eric/tools/css/reset/

0
Rudolf

Ce css a permis à chrome et firefox de restituer tous les autres éléments de ma page normalement et de supprimer la marge au-dessus de ma balise h1 En outre, lorsqu'une page est redimensionnée, em peut fonctionner mieux que px.

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}
0
user3139574