Как задать высоту span в CSS: преодолеваем ограничения inline

Быстрый ответ

Возможность установки фиксированной высоты для тэга <span> появляется при изменении его отображения со стандартного inline на inline-block или block:

<span style="display: inline-block; height: 50px;">Текст</span>

После такого преобразования высота элемента <span> замораживается на уровне 50 пикселей.

Свойство display влияет на структуру страницы в CSS. Параметр inline-block объединяет в себе строчный тип inline с возможностью задавать размеры, как у block.

Обеспечиваем кроссбраузерность

Для обеспечения исправной работы для пользователей IE6/7 стоит применить звёздный хак или свойства zoom и display:

span {
  display: inline-block;
  *display: inline; 
  zoom: 1; /* Следует учесть и IE6/7 */
}

Возможно также использовать свойство line-height для вертикального центрирования однострочного текста или padding, чтобы визуально увеличить пространство внутри span.

Визуализация

Можно представить установку высоты элементу <span> как процесс примерки наглядно подходящих джинсов:

span.jeans {
  display: inline-block; /* Модель джинсов */
  height: 50px;         /* Идеальная посадка */
}

<span class="jeans">👖</span>

Точно также, как и джинсы нуждаются в адаптации к форме тела, элементу span требуется изменение свойства display для достижения желаемой высоты.

Настройки для специфических ситуаций

Существуют ситуации, когда display: inline-block будут некорректно смотреться. Рассмотрим альтернативные решения:

Изучаем флекс-макеты

Чтобы контролировать высоту тэга span, можно поместить его внутрь флекс-контейнера:

.flex-container {
  display: flex; /* "Ощутим силу!"🎵 */
  align-items: stretch; /* Наладим полную высоту! */
}

.flex-container span {
  flex: 1; /* Цитата Oprah: "You get a flex! You get a flex! Everybody gets a flex!" */
}

Подробнее об этом расскажет наш спикер на видео

Осваиваем макет CSS Grid

В CSS Grid для элементов span присутствуют прецизионные настройки выравнивания:

.grid-container {
  display: grid; /* Высший уровень аккуратности с 2017 года */
}

.grid-container span {
  grid-area: 1 / 1 / 2 / 3; /* Это не игровые команды */
}

Благодаря возможности двумерного позиционирования, макет Grid стал прекрасным выбором.

Обеспечиваем читаемость кода для устаревших браузеров

Замена display на block может затруднить понимание вашего кода, ведь span обычно используется встроенным. Если вам требуется блочная модель, лучше выбрать div тэг.

Учитываем все стороны доступного дизайна

Внесение изменений в свойства display, height и line-height может оказывать влияние на читабельность текста. Важно тщательно протестировать стили на разнообразных устройствах!

Полезные материалы

1. height – CSS: Каскадные таблицы стилей | MDN
2. HTML span тег
3. Верстка текста на веб-страницах в соответствии с сеткой базовых линий – A List Apart
4. Глубокое погружение в свойство display: Двойное значение свойства display — Smashing Magazine
5. CSS значения и единицы измерения – Учебник по веб-разработке | MDN