Quitar el relleno superior e inferior en el ingreso de texto en Chrome/Firefox

Question

Estoy tratando de hacer que una entrada parezca texto sin formato. El objetivo es trazar un intervalo, cuando el usuario hace clic en el tramo que oculta y muestra una entrada que se ve como texto plano, pero editable por el usuario.

En Chrome y Firefox que no puede deshacerse de la parte superior e inferior rellenos, incluso si fijo propiedades de relleno y CSS margen a 0.

Mi CSS se ve así:

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

ver que la fuente el tamaño está establecido en 20px. Chrome y Firefox agregan 4px padding-top y padding-bottom, por lo que la entrada es 28px de alto, no 20px como se esperaba.

Answer 1

Debe restablecer line-height del elemento de entrada para que sea 20px también. Por defecto, algunos navegadores agregan 4px (2 arriba + 2 abajo) para ingresar la altura de línea del elemento.

Answer 2

Podría ser su fuente. Intente configurar el alto de CSS de la entrada directamente o intente ajustar el alto de la línea.

Answer 3

Como Diodeus sugirió, simplemente agregue la altura a su entrada.

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    height: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

line-height no funcionará