Eliminar el relleno superior e inferior en la entrada de texto en Chrome/Firefox

Estoy tratando de hacer que una entrada parezca texto sin formato. El objetivo es dibujar un lapso, cuando el usuario hace clic en el lapso, se oculta y muestra una entrada que parece texto sin formato, pero que el usuario puede editar.

En Chrome y Firefox no puedo deshacerme de los rellenos superior e inferior, incluso si configuro las propiedades CSS de margen y relleno en 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;
}

Vea que el tamaño de fuente está establecido en 20px. Chrome y Firefox agregan relleno superior e inferior de 4 píxeles, por lo que la entrada tiene una altura de 28 píxeles, no 20 píxeles como se esperaba.

preguntado el 03 de mayo de 12 a las 18:05

¿Puede proporcionar un violín o una demostración en vivo? -

Gracias Jrod, en realidad me ayudó a ver el problema. Al crear la demostración de jsfiddle, noté que no había tal problema al crear el estilo desde cero. Mi tenía la altura de línea modificada en CSS, y es por eso que no coincidía con el altura. ¡Gracias! -

podría ser su marcador de posición. Selecciónalo con ::placeholder y use el posicionamiento relativo para traerlo "un poco" (por ejemplo, top: 0.1em;) abajo. -

3 Respuestas

Necesita restablecer el line-height del elemento de entrada para ser 20px también. De forma predeterminada, algunos navegadores agregan 4px (2 arriba + 2 abajo) a la altura de línea del elemento de entrada.

contestado el 03 de mayo de 12 a las 18:05

Podría ser tu fuente. Intente configurar la altura de CSS de la entrada directamente o intente ajustar la altura de línea.

contestado el 03 de mayo de 12 a las 18:05

Como sugirió Diodeus, solo agregue 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;
}

la altura de línea no funcionará

contestado el 03 de mayo de 12 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.