Текст без вертикальных отступов

285

17 мая 2019, 02:10

Ссылка на codepen - https://codepen.io/anon/pen/bQmYgm.

    <span>SEO</span>
    span{
      font-size: 120px;
      line-height: 1;
    }

Как сделать так чтобы текст был во всю высоту родителя (span), т.е. чтобы высота родителя соответствовала размеру шрифта, и чтобы текст был прижат со всех сторон, чтобы не было отступа сверху, снизу, и сбоку?

P.S. Надеюсь понятно объяснил)

Answer 1

В пределах одного элемента, такое невозможно осуществить в полной мере. Но, можно попробовать максимально прижать:

span { 
  display: inline-block; 
  height: 0.7em; 
  padding: 0; 
  font-size: 240px; 
  line-height: 0.7em; 
   
  border: 3px dashed #090; 
}

<span>SEO</span>

Как видим, остались отступы по бокам. И здесь не помогут, ни font-kerning, ни letter-spacing, ни что-либо ещё (где ты, отрицательный padding?..)).

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

Так же, ситуация осложняется тем, что способ выше, хоть как-то работает для текста написанного заглавными латинскими буквами. Но, со строчными латинскими или кириллицей, в виду наличия у букв выступающих элементов, такое уже не пройдёт - если равняться по выступающим частям, то текст не будет выглядеть прижатым снизу, к примеру.

Можно попытаться избавиться от отступов по бокам, обернув span с текстом ещё одним блоком, и задать ему отрицательные margin-ы, overflow,width... Имхо - "овчинка выделки не стоит". Удачи в экспериментах!