¿Por qué el relleno CSS aumenta el tamaño del elemento?

Estoy tratando de darle algo de relleno a mi div y textarea. Cuando hago esto, aumenta el tamaño del elemento, en lugar de reducir el área de contenido dentro de él. ¿Hay alguna forma de lograr lo que estoy tratando de hacer?

Puede agregar box-sizing:border-boxal elemento contenedor, para poder especificar un ancho y alto que no varíen cuando agregue relleno y / o borde al elemento.

Consulte aquí (MDN) para conocer las especificaciones.

Actualizar (comentario copiado para responder)

En este momento, el valor border-boxes compatible con todos los navegadores principales, según MDN Specs

Algunos navegadores de curso requiere adecuada prefijo es decir, -webkity -mozcomo se puede ver claramente aquí

De acuerdo con las especificaciones de CSS2 , el ancho renderizado de un elemento de tipo cuadro es igual a la suma de su ancho, borde izquierdo / derecho y relleno izquierdo / derecho (el margen izquierdo / derecho también entra en juego). Si su caja tiene un ancho de '100%' y también tiene margen, borde y relleno, afectarán (aumentarán) el ancho ocupado por el objeto.

Por lo tanto, si su área de texto necesita ser 100% de ancho, asigne valores a ancho, margen izquierdo / derecho, borde izquierdo / derecho y relleno izquierdo / derecho de tal manera que su suma sea igual al 100%.

En CSS3 tenemos tres modelos de tamaño de caja . Puedes usar el border-boxmodelo:

El ancho y alto especificados (y las propiedades mínimas / máximas respectivas) en este elemento determinan el cuadro de borde del elemento. Es decir, cualquier relleno o borde especificado en el elemento se coloca y dibuja dentro de este ancho y alto especificado. El ancho y la altura del contenido se calculan restando el borde y los anchos de relleno de los lados respectivos de las propiedades especificadas de 'ancho' y 'alto'.

Esto fue un desastre en la parte del W3C y varios navegadores solo agregaron a esta complejidad con sus propias versiones de modelos de caja. Personalmente, en lugar de pensar en qué navegador o configuración CSS hará el truco, simplemente envuelvo el contenido del cuadro en otra declaración DIV y uso márgenes en ese DIV, en lugar de usar relleno, como este:

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

Aunque esto solo funciona para contenedores de tamaño fijo

Depende del navegador y su implementación del modelo de caja . Lo que está experimentando es el comportamiento correcto.

IE tradicionalmente se equivocó: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Para una solución más entre navegadores, puede evitar este comportamiento, ajustando cualquier etiqueta que necesite relleno en otra etiqueta con ancho fijo y dándole ancho: auto. De esta manera, si el padre tiene un ancho de x, y le agrega relleno al niño, el niño heredará el ancho completo de x, aplicando el relleno correctamente sin modificar el ancho del padre o el suyo.

Un div por defecto toma el ancho de su contenedor principal, por lo que para evitar problemas de compatibilidad con el navegador, puede agregar un div secundario en el div especificado y luego agregar el relleno requerido al div secundario .

NB : no especifique el ancho para el div secundario porque aumentaría si agrega relleno