4

Как установить высоту <span> по высоте содержимого? Много пишут о том, как его растянуть по высоте родителя, но мало о том, как по содержимому.

введите сюда описание изображения

В моём примере (ссылка на jsfiddle) span находится внутри flex, но тоже самое было и внутри table-cell.

0

1 ответ 1

2

По умолчанию, потомки родителя, у которого установлен display: flex; растягиваются по его высоте. Если есть необходимость сделать иначе, необходимо установить родителю свойство align-items: flex-start / center;.

div {
  display: flex;
  justify-content: space-between;
  background-color: green;
  height: 50px;
  padding: 5px 10px;
  align-items: center;
}

.title {
  background-color: red;
}

.shortcut_hint {
  font-family: Consolas, sans-serif;
  font-size: 50%;
  background-color: #003366;
  color:#ffffff;
  padding: 2px 5px;
  border-radius: 2px;
}
<div>
  <span class="title">Title</span>
  <span class="shortcut_hint">Ctrl+1</span>
</div>

3
  • Благодарю Вас за ответ! А как следует быть, если span внутри, например, table-cell, и зафлоачен вправо? Он тоже также растянется по высоте, но здесь причина будет уже другая. 5 дек 2016 в 9:05
  • Можете представить код? Пока что не очень понял что имеется в виду. 5 дек 2016 в 9:18
  • Попробовал переписать свой код в упрощённом варианте - всё получилось. Придётся ещё много времени искать причину в проекте. 6 дек 2016 в 3:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.