вертикальный отступ для элементов ввода в браузерах webkit не имеет никакого эффекта

Question

Я не могу установить вертикальный / верхний отступ для текста / заполнителя в элементах ввода.

Следующий код будет работать в IE / Firefox / Opera, но не в Safari / Chrome:

CSS:

input
{
 border: 1px solid black;
 height: 100px;
 padding: 70px 25px 10px 25px;
 width: 300px;
}

HTML:

<input type="text" placeholder="Enter text here"/>

Инструменты разработчика веб-набора отображают метрики в том виде, в каком они должны быть, но текст все еще находится в середине ввода.

Нечто подобное может быть здесь (без ответа).

Answer 1

входы являются встроенными элементами.Встроенные элементы не допускают вертикальное заполнение.

добавьте: display:block к вашему CSS, затем вам нужно будет добавить float:left и впоследствии очистить ваши поплавки.

Answer 2

Я считаю, что в Webkit нет способа установить вертикальное заполнение.

Используйте свойство height, чтобы добавить вертикальное заполнение.Возможно, вам придется использовать line-height или padding-top / padding-bottom для вертикального центрирования текста в браузерах.

Answer 3

Только что проверил и узнал, как ведет себя Chrome. Не могли бы вы вставить вход в div и использовать для этого отступ?