web-dev-qa-db-fra.com

Suppression de l'espace entre h1 et h2

Je suis tombé sur un problème que je n'arrive pas à résoudre en aucune façon, peut-être que j'utilise divs de manière erronée? 

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center
}
<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

C'est le résultat: 

 SS

Je veux diminuer l'espace entre mon <h1> et <h2>, et j'ai découvert que la manière de le faire était de définir line-height dans h1 sur 0px.

Mais au fur et à mesure que je fais cela, toute ma page se déplace comme suit:

 SS

Je veux garder le texte à la même position qu'avant de changer le line-height. Je soupçonne que j'utilise mal la fonction div class. C'est plus une question théorique.

htmlcsshtml-heading
5
user3552616

les en-têtes h1 à h6 ont margin par défaut. Vous devez donc le réinitialiser en définissant: margin:0.

.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin: 0
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  text-align: center;
  margin: 0
}
<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

10
dippas

Les balises d'en-tête HTML ont des valeurs CSS par défaut appliquées dans la plupart des navigateurs. Voici les valeurs de h1 et h2 qui leur sont appliquées par défaut. Vous devez donc remplacer le margin-bottom de h1 et le margin-top de h2 si vous souhaitez réduire l'espacement entre vos h1 et h2.

h1 { 
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}


.greeting h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 100px;
  text-align: center;
  margin-bottom: 0;
}
.greeting h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: lighter;
  font-size: 35px;
  line-height: 0px;
  text-align: center;
  margin-top: 0;
}
<div class="greeting">
  <h1>Hi.</h1>
  <h2>Select a group</h2>
</div>

3
Muhammad

Il suffit d'ajouter les lignes suivantes

.greeting h1 {
  margin:0px;
  line-height:35px;
}
.greeting h2 {
  margin:0px;
  line-height:35px;
}
1
Varun Jain