Html: Установите размер шрифта, равный высоте ввода

Question

Мне нужно установить font-size на input Высота. Input выглядит следующим образом:

<input type="text" id="inputt" name="test" value="ddpp" style="height:100px; width:200px; font-size:100px; line-height:100px; font-family: 'Times New Roman'"> 

Как вы можете увидеть height, font-size и line-height свойство равно 100px. Когда я alert() эти свойства по jquery после загрузки страницы values равны 100px. Но текст внутри input не подходит input height. я также пытался сделать это с span:

<span id="spann1" style="height:100px;font-size: 100px;border: 1px solid red;font-family: 'Times New Roman'">ddpp</span> 

В результате height из span изменилось в 113px и line-height стал 142px. Зачем? Означает ли это, что font-size: 100px в действительности не является 100px. Тогда как это работает?

Answer 1

вы можете изменить отображаемое свойство. Свойство display указывает, отображается ли/как элемент. Каждый элемент HTML имеет значение отображения по умолчанию в зависимости от того, какой тип элемента он есть. Значение по умолчанию для большинства элементов является блочным или встроенным.

css_display_visibility

диапазона имеет значение встроенных по умолчанию, вы можете изменить дисплей встроенного блока.

Встроенные элементы:

respect left & right margins and padding, but not top & bottom 
cannot have a width and height set 
allow other elements to sit to their left and right. 

Инлайн-блочные элементы:

allow other elements to sit to their left and right 
respect top & bottom margins and padding 
respect height and width 

CSS display: inline vs inline-block

удачи