Выравнивание текста по вертикали.

Возникли проблемы вертикального выравнивания сверху два простых текста. По какой-то причине есть небольшой пробел … пробовал обивка, высота линии и т.д., Ничего. Любой ввод полезен.

<span style="padding:0px;font-size: 48px;font-style: italic;font-weight: bold;"><span style="padding:0px;font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>

КРАТКАЯ АВТОБИОГРАФИЯ

https://jsfiddle.net/p64g800g/

Большое спасибо

3 ответа

  1. Используйте font-size: 0px;для родителя так, чтобы пространство между spanними имело widthзначение 0px.

    Использовать это:

    <div style="font-size: 0px;">
      <span style="font-size: 30px;font-style: italic;vertical-align:text-top;">VITA</span>
      <span style="font-size: 40px;font-style: italic;vertical-align:text-top;">VITA</span>
    </div>

    Альтернатива: поплавок<span>

    span {
      float: left;
    }
    <span style="font-size: 30px;font-style: italic;">VITA</span>
    <span style="font-size: 40px;font-style: italic;">VITA</span>

  2. Вы можете изменить высоту линии на второй. Я бы завернул их в div, а не в другой промежуток, но не сделал этого здесь, так как это может быть не вариант для вас.

    .span1 {
      padding: 0px;
      font-size: 48px;
      font-style: italic;
      font-weight: bold;
    }
    .span2 {
      font-size: 30px;
      font-style: italic;
      vertical-align: text-top;
    }
    .span3 {
      font-size: 40px;
      line-height: 39px;
      font-style: italic;
      vertical-align: text-top;
    }
    <span class="span1">
      <span class="span2">VITA</span>
      <span class="span3">VITA</span>
    </span>

  3. A вы можете видеть, что ваши <span>теги не могут принятьmargin-top,margin-bottom, padding-topи padding-bottom. Здесь вы должны начать думать о displayсобственности.

    То displayвам нужно вот inline-block. С помощью этого свойства можно начать перемещение <span>элементов по вертикали.

    <span style="padding: 0px;font-size: 48px;font-style: italic;font-weight: bold;">
        <span style="font-size: 30px;font-style: italic;vertical-align: text-top;display: inline-block">VITA</span>
        <span style="font-size: 40px;font-style: italic;vertical-align: text-top;display: inline-block;margin-top: -4px">VITA</span>
    </span>