Espacio adicional en textarea, se diferencia de los navegadores

Hay un espacio adicional debajo de la etiqueta textarea. De 1 a 4 píxeles en diferentes navegadores. El margen de beneficio es muy simple:Espacio adicional en textarea, se diferencia de los navegadores

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
    <head> 
     <style> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      .main { 
       background-color: red; 
      } 
      textarea { 
       background-color: gray; 
       resize: none; 
       margin: 0; 
       border: 0 none; 
       padding: 10px; 
       height: 50px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="main"> 
      <textarea></textarea> 
     </div> 
    </body> 
</html>

Así es como se representa en los navegadores:

Screenshot

Por qué sucede esto? Cómo eliminar este espacio extra?

Fuente

2011-08-22 Roman

133

Agregar vertical-align: top a textarea.

La razón de la diferencia es que textarea es un elemento inline (o inline-block), y el hueco es el espacio reservado para descenders en el texto. No sé exactamente por qué el espacio es diferente entre diferentes navegadores.

Fuente

2011-08-22 08:43:48 thirtydot

¡Pásame, +1! – Kyle

Esto funciona al 100%. Eres un genio. – Roman

Genio total !!! –

En mi caso, thirtydot la respuesta no funcionó bien con el borde inferior del elemento primario <div>.

display: block me parecieron muy bien.

Fuente

2015-11-06 03:20:22

Espacio adicional en textarea, se diferencia de los navegadores

Respuesta

Cuestiones relacionadas