Почему некорректно работает line-height в input?

Question

Почему некорректно работает line-height в input?

Рейтинг: 0Ответов: 0Опубликовано: 03.08.2023

Есть простой инпут для него задан css:

.form__input {
  border: 1px solid #AEB1C8;
  border-radius: 8px;
  padding: 13px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  width: 100%;
  background-color: #E6E8F1;
  color: #444188;
  outline: none;
}

<input class="form__input js-email-input" id="email-input" type="email" name="email" placeholder="E-mail" required="">

Свойство line-height работает некорректно.

Если я задаю line-height = 16px, то высота самого поля составляет 19px, но если я задам line-height = 18px, то высота инпута уже будет 18px и свойство срабатывает правильно. В чем проблема? Почему я не могу задать line-height = 1? Все значения более 18px срабатывают корректно.

css

Источник: Stack Overflow на русском

Почему некорректно работает line-height в input?

Ответы