Html: Définir la taille de police égale à la hauteur d'entrée

Question

Je dois adapter font-size à input hauteur. Input ressemble à ceci:

<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'"> 

Comme vous pouvez le voir les height, font-size et line-height propriétés sont égales à 100px. Lorsque je alert() ces propriétés par jquery après le chargement de la page tous values sont égal à 100px. Mais le texte à l'intérieur input ne correspond pas à un input height. J'ai aussi essayé de le faire avec un span:

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

En conséquence, le height de span a changé à 113px et line-height est devenu 142px. Pourquoi? Est-ce que cela signifie que font-size: 100px n'est pas un 100px en réalité. Alors comment ça marche?

Answer 1

vous pouvez changer la propriété d'affichage. La propriété display spécifie si/comment un élément est affiché. Chaque élément HTML a une valeur d'affichage par défaut selon le type d'élément. La valeur d'affichage par défaut pour la plupart des éléments est block ou inline.

css_display_visibility

durée a valeur par défaut en ligne, vous pouvez modifier l'affichage à inline-block.

éléments Inline:

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. 

éléments inline-block:

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

bonne chance