@MyQuestion
Начинающий Frontend

CSS: почему в теге label, line-height влияет на сам label как контейнер, но не на его текстовую ноду?

Добрый день!

Я делаю кастомные чекбоксы, и я хотел, что бы они выравнивались, относительно высоты контейнера.
<li class="extra-options__item">
   <input class="input-checkbox extra-options__checkbox visually-hidden" type="checkbox" name="drinking-water" id="drinking-water">
   <label class="extra-options__label" for="drinking-water">
      Питьевая вода
   </label>
</li>


.extra-options__label {
  position: relative;
  cursor: pointer;
}

.extra-options__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #CDCDCD;
  cursor: pointer;
}
.extra-options__label {
  min-height: 30px;
  padding-left: 47px;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 30px;
}

https://jsfiddle.net/12moj5pn/4/

Я пытаюсь задать line-height, на label, высота label увеличивается, а текст внутри label, занимает дефолтную высоту. Получается, псевдо элемент, отталкивается от верхнего левого угла текста. Но если бы высота строки, влияла на текст, то высота текста, была бы равна высоте контейнера, и псевдо элемент, правильно расположился бы относительно контейнера.

Я конечно сейчас задам position: relative на li, и всё будет работать. Или дам span для текста в dom и смогу обращаться непосредственно к текстовой ноде и её высоте. Но почему label такой кривой? Или я такой ...?) Может, это как-то более правильно можно сделать?
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы