Как убрать отступ справа у текста из-за line-height

Question

Всем привет. Извиняюсь, если вопрос глупый, но не могу решить проблему с заголовком,

Нужно растянуть текст по ширине экрана на 100%, когда ставлю line-height согласно макету, то он выходит за грани и если смотреть через код элемента, то в конце заголовка есть запас, на скрине видно underline, пробелов никаких нет.

<header class="header">
        <div class="title">
            <h1>PORTFOLIO</h1>
        </div>
    </header>

Ниже CSS

.wrap {
    margin-left: 100px;
    margin-right: 100px;
    font-family: 'Bebas Neue', cursive;
    border: 1px solid black;
}

.header {
    max-width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}

.title {
    width: 100%;
    display: flex;
}

.title h1 {
    letter-spacing: 154px;
    font-size: 128px;
    text-decoration: underline;
    
    
}

Answer 1

Не из-за line-height, а из-за letter-spacing. Вообще задавать такие параметры в абсолютных единицах - не очень хорошее решение. Лучше, на мой взгляд, вообще отказаться от letter-spacing, обернуть каждую букву заголовка в span и растянуть по всей ширине экрана посредством flex. Подчёркивание сделать с помощью псевдоэлемента h1, а размер шрифта, толщину подчёркивания и отступ от текста задать в относительных единиц, например, vw. Тогда заголовок получится "резиновым" и будет автоматически адаптироваться под любые размеры экрана:

.header {
    max-width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    width: 100%;
    display: flex;
}
.title h1 {
    width: 100%;
    font-size: 8vw;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.title h1:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1vw solid #000;
    bottom: -0.5vw;
}

<header class="header">
  <div class="title">
    <h1><span>P</span><span>O</span><span>R</span><span>T</span><span>F</span><span>O</span><span>L</span><span>I</span><span>O</span></h1>
  </div>
</header>

БЛОГ НА HUSL

Как убрать отступ справа у текста из-за line-height

Ответы (1 шт):