la entrada y el área de texto tienen un ancho diferente cuando se configuran con el mismo ancho?

Question

Cuando configuro el ancho de una entrada y un área de texto al 94%, parecen ser ligeramente diferentes en ancho. Esto es algo que he visto muchas veces en muchos sitios.

¿Alguien puede explicar por qué un área de texto no es tan ancho como una entrada cuando se establece en el mismo% de ancho?

input, textarea { 
    width: 94%; 
} 

Answer 1

1. No se olvide the box model incluye bordes, el relleno y los márgenes. Todos ellos afectan el ancho físico real de un elemento en la página.
2. A menos que use un CSS reset, está a merced de las hojas de estilo predeterminadas del navegador que establecen diferentes bordes, relleno y márgenes para cada elemento.

Answer 2

Con CSS3 también se puede utilizar:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */