Entfernung zwischen h1 und h2

Question

Ich bin über ein Problem gestolpert, das ich in keiner Weise lösen kann, vielleicht verwende ich div s falsch?

.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>

Dies ist das Ergebnis:

Ich möchte den Raum verringern, zwischen meinen <h1> und <h2>, und ich fand heraus, dass die Art und Weise, war zu tun line-height in h1 zu 0px setzen.

Aber wie ich, dass meine ganze Seite bewegt sich wie so nach oben:

ich den Text in der gleichen Position halten will, wie es, bevor ich die line-height ändern war. Ich vermute, dass ich die div class Funktion falsch benutze. Dies ist eher eine theoretische Frage.

Answer 1

Schriften h1-h6 haben margin standardmäßig, also müssen Sie es zurücksetzen, Einstellung: 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>

Answer 2

HTML Überschriften-Tags haben einige Werte Standard-CSS in den meisten Browsern angewendet. Im Folgenden sind die Werte von h1 und h2, die standardmäßig auf sie angewendet werden, so müssen Sie die margin-bottom von h1 und margin-top von h2 außer Kraft zu setzen, wenn Sie den Abstand zwischen Ihrem h1 und h2 verringern wollen.

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>

Answer 3

Fügen Sie einfach die folgenden Zeilen

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