Удаление места между h1 и h2

Question

Я наткнулся на проблему, которую я никак не могу решить, возможно, я использую div s неправильным способом?

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

Это результат:

Я хочу, чтобы уменьшить расстояние между моим <h1> и <h2>, и я узнал, что способ сделать это было установить line-height в h1 на 0px.

Но, как я, что вся моя страница перемещается вверх так:

Я хочу, чтобы сохранить текст в том же положении, как это было прежде, чем изменить line-height. Я подозреваю, что неправильно использую функцию класса div. Это скорее теоретический вопрос.

Answer 1

заголовки h1 до h6 по умолчанию имеют margin, поэтому вам необходимо его сбросить, настройка: 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 теги заголовков имеют некоторые значения CSS по умолчанию, применяемые в большинстве браузеров. Ниже приведены значения h1 и h2, которые применяются к ним по умолчанию, так что вам нужно переопределить margin-bottom из h1 и margin-top из h2, если вы хотите, чтобы уменьшить интервал между вашими h1 и 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>

Answer 3

Просто добавьте следующие строки

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