Как убрать лишний отступ в заголовке?

Question

[ssintro]

На фото ниже есть 2 заголовка h2 и h1, в есть лишний отступ и я не знаю как его убрать без жёсткого позиционирования

В блоке есть паддинг в 40px



Вот код:

<!-- HTML  -->
<section>
  <div class="wrapper row">
    <div class="main-text col-md-6">
      <h2 class="text-left">Be good</h2>
      <h1 class="text-left text-uppercase">Be good</h1>
    </div>
  </div>
</section>

/* CSS */

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  color: #1b1d1f;
}

h1 {
  font-weight: 700;
  font-size: 70px;
}

h2 {
  font-weight: 700;
  font-size: 16px;
  font-family: "Montserrat";
}

.wrapper {
  padding: 50px;
  background: linear-gradient(270deg, #55ddee 0%, #d9ffff 100%);
  height: 720px;
}

.main-text {
  padding: 40px;
  background: #ffffff;
  border-radius: 36px;
  height: 420px;
}

Comments

[Ankhena]

Это не padding, это line-height.
Только не надо его убирать. Попробуйте сделать заголовок в несколько строк и посмотрите что будет с маленьким line-height.

Позиционируйте не жестко, а относительно высоты строки.

[ssintro]

Ankhena, Я имею ввиду отступ от левого края, а не от верха или низа, то есть не высоту строки

[Pavstyuk]

ssintro, Вероятно это особенность шрифта. Чем больше font-size тем больше ширина букв и отступов внутри самой буквы.

[Pavstyuk]

ssintro,

spoiler

[ssintro]

Pavstyuk, Скорее всего, может знаете как сбросить?

[Pavstyuk]

ssintro, Думаю, что никак. Только отрицательны margin-left может помочь, чтобы выровнить по левому краю с остальным контентом.

[mahmudchon]

ssintro, наверняка вы можете это понять, например, уменьшив размер шрифта, используя консоль разработчика в браузере и наглядно увидеть. Но я также склоняюсь, что особенности шрифта.

[Ankhena]

ssintro,

Я имею ввиду отступ от левого края, а не от верха или низа, то есть не высоту строки

Интересно, как мы должны были догадаться.

Речь о том, что буквы не вровень получаются?
Компенсируйте отрицательным отступом. Опять же можно в em или других шрифтовых единицах.

Answer 1

[sasmoney]

h1 {
font-weight: 700;
font-size: 70px;
margin-top: 0;
}

Теперь заголовок h1 не будет иметь верхнего отступа.