Как убрать отсуп у заголовка с большим размером шрифта в html с помощью CSS?

Question

[dandan13]

Добрый день,

у меня есть два заголовка, "H1" и "H2" , обоим я дал классы меняющие размеры шрифта. Из-за того, что один из заголовков больше по размеру шрифта, он получает немного padding или margin слева, что выглядит не красиво. Как выровнять их так, чтобы оступа не было?

Вот код:

<div class="d-flex justify-content-center flex-column">
                <h2 class="label-text">
                  Test
                 </h2>

                  <h1 class="main-text">
                    Main Title
                  </h1>
              
                   <h3 class="sub-text">
                    Sub Title
                   </h3>
</div>

.sub-text {
    font-size: 25px;
    font-weight: 600;
}

.main-text {
    font-size: 125px;
    font-weight: 700;
}

Вот картинка:


Спасибо!

Comments

[Alex_mos]

Попробуйте прописать
*{
padding:0;
margin:0;
}

[FrelFrloich]

Никак, изучайте типографику, единственый вариант делать отрицательные отступы.

Answer 1

[iBird Rose]

у каждой буквы в любом шрифте есть расстояние по всем сторонам, чтобы даже при расположении вплотную - буквы не слипались. ну и это расстояние зависит от font-size. ну и в каждом шрифте оно будет разное.
поэтому только подгонять самому и делать margin-left: -n px;, к примеру

Comments

[Ankhena]

Я бы только не в px задавала сдвиг, а в единицах зависящих от размера шрифта, em, ex, ch

[dandan13]

Спасибо

[Aetae]

dandan13, ну и не margin лучше, а text-indent.)

[FrelFrloich]

В любом случае, настучать надо дизайнеру по голове.