Как мне сделать высоту ввода такой же, как высота текста?

#html #css

#HTML #css

Вопрос:

Пожалуйста, взгляните на параметры CSS, которые я добавил для ввода:

 <input type="email" value="" name="user[email]" style="
    font-size: 36px;
    line-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
">
 

Но почему в результате высота ввода выше?

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

Других стилей нет.

Подскажите, пожалуйста, как сделать высоту ввода точно такой же, как у текста?

Комментарии:

1. не могли бы вы опубликовать свой код в виде текста, пожалуйста? Спасибо!

2. @cornonthecob готово

3. вы хотели прокомментировать высоту?

4. размер поля: граница-поле? кроме того, поскольку вы установили размер шрифта, как насчет явной установки высоты строки в 36 пикселей?

5. @MohamedMufeed Ничего из этого не помогает

Ответ №1:

Это поведение элементов ввода по умолчанию. Мигающий курсор внутри занимает больше высоты, чем текст внутри, вот почему у нас есть внутреннее заполнение, которое не исчезает.

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

Смотрите, мигающий курсор касается верхней границы и нижней границы. А слева от границы текст касается его. Итак, это поведение элементов ввода по умолчанию, там будет небольшое заполнение сверху и заполнение снизу.