Высота <span> по высоте содержимого

#html #css

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



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

Ответы

Ответ 1

По умолчанию, потомки родителя, у которого установлен 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;
}

  Title
  Ctrl+1