Estoy tratando de dar 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 manera de lograr lo que estoy tratando de hacer?¿Por qué el relleno de CSS aumenta el tamaño del elemento?
Gracias por su ayuda!
Depende del navegador y su implementación del box model. Lo que estás experimentando es el comportamiento correcto.
IE tradicionalmente se equivocó: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
Según CSS2 specs, el ancho representado de un elemento de tipo caja es igual a la suma de su anchura, a la izquierda/borde derecho y el relleno a la izquierda/derecha (izquierda/margen derecho entra en juego también). Si su cuadro 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 debe tener un ancho del 100%, asigne valores al ancho, margen-izquierda/derecha, borde-izquierda/derecha y relleno-izquierda/derecha de tal manera que su suma sea igual al 100%.
En CSS3 tenemos three box-sizing models. Puede utilizar border-box modelo:
La anchura y altura especificadas (y respectivas propiedades mín/máx) en este elemento a determinar el cuadro de borde del elemento. Es decir, cualquier relleno o borde especificado en el elemento se presenta y dibuja dentro de este ancho y alto especificados. El ancho y alto del contenido se calcula restando el ancho del borde y el relleno de los lados respectivos de las propiedades 'ancho' y 'alto' especificadas.
Esto fue un desastre en la parte W3C y varios navegadores solo se agregaron a esta complejidad con sus propias versiones de modelos de cajas. En lo personal, en lugar de pensar qué navegador o CSS configuración hará el truco que acabo de envolver el contenido de la caja' Todavía en otro DIV declaración y uso de los márgenes en que DIV, en lugar de utilizar el relleno, así:
<div id="container" style="width: 300px; border: 10px solid red;">
<div id="content" style="width: 250px; margin: 25px;">
Some content
</div>
</div>
Aunque este solo funciona para contenedores de tamaño fijo
Puede agregar box-sizing:border-box al elemento del contenedor, para poder especificar un ancho y una altura que no varíen cuando agrega relleno y/o borde al elemento.
Consulte here (MDN) para obtener las especificaciones.
Update (comentario copiado para responder)
En este momento, el valor border-box se soporta en todos los principales navegadores, según MDN Specs
Algunos navegadores de curso requiere prefijo adecuado es decir,-webkit y -moz como se puede ver claramente here
En este momento, el valor 'border-box' es compatible con todos los principales navegadores, de acuerdo con [MDN Specs] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Browser_compatibility) - algunos navegadores, por supuesto, requieren el prefijo adecuado, es decir, '-webkit' y' -moz', como se puede ver claramente [aquí] (https://developer.mozilla.org/en-US/docs/Web/CSS/box) -sizing # Ejemplos) –
Para una solución más multi-navegador, puede evitar este comportamiento, envolviendo todo lo que necesita la etiqueta de relleno en otra etiqueta con ancho fijo, y dándole width: auto. De esta forma, si el padre tiene un ancho de x y agrega relleno al niño, el niño heredará el ancho completo de x, aplicando el relleno correctamente sin modificar el ancho principal o el propio.
Un div por defecto toma el ancho de su contenedor principal, por lo que para evitar problemas de compatibilidad del navegador, se podría añadir un div niño en el especificado div a continuación, añadir el relleno necesario para el div niño .
N.B - no especifique la anchura de la div niño porque aumentaría si se agrega el relleno
¿Qué navegador (s) se está utilizando para probar? –
Agregue '* {box-sizing: border-box;}' a su hoja de estilo, y el tamaño actuará como espera. Paul Irish confirmó que es seguro para todos los navegadores modernos: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –