Удаление пробела между h1 и h2

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

.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. Это больше теоретический вопрос.


html css html-heading
person Community    schedule 26.11.2016    source источник

Ответы (4)


arrow_upward
17
arrow_downward

заголовки с 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>

person dippas    schedule 26.11.2016

arrow_upward
5
arrow_downward

Теги заголовков 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>

person Muhammad    schedule 26.11.2016

arrow_upward
2
arrow_downward

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

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

arrow_upward
1
arrow_downward

Если вы просто хотите назначить поле только для этого блока, вам не нужно определять его глобально, вы можете просто сделать то же самое, используя встроенный CSS.

<h1  style="margin-bottom: 0">Hi</h4>
<h1  style="margin-top: 0">Select a group</h4>
person Janaka Ekanayake    schedule 17.01.2021