CSS Modelo de caja

Modelo de caja CSS (Box Model)

Todos los elementos HTML pueden considerarse cajas. En CSS, el término "box model" se utiliza para el diseño y la maquetación.

El modelo de caja CSS es, en esencia, una caja que envuelve los elementos HTML circundantes. Incluye: márgenes, bordes, relleno (padding) y contenido real.

El modelo de caja permite colocar elementos en el espacio existente entre otros elementos y los bordes de los elementos circundantes.

La siguiente imagen ilustra el modelo de caja (Box Model):

Explicación de las diferentes partes:

• Margin (margen exterior)- Limpia el área fuera del borde; el margen exterior es transparente.
• Border (borde)- El borde que rodea el relleno (padding) y el contenido.
• Padding (relleno interior)- Limpia el área alrededor del contenido; el relleno (padding) es transparente.
• Content (contenido)- El contenido de la caja; muestra texto e imágenes.

Para establecer correctamente el ancho y la altura de los elementos en todos los navegadores, debes saber cómo funciona el modelo de caja.

Ancho y altura de los elementos

Importante:Cuando especificas las propiedades de ancho y altura de un elemento CSS, solo estás configurando el ancho y la altura del área de contenido. Para conocer el tamaño completo del elemento, también debes añadir el relleno (padding), el borde y el margen exterior.

El ancho total del elemento en el siguiente ejemplo es de 450px:

Hagamos el cálculo nosotros mismos:
300px (ancho)
+ 50px (padding izquierdo + derecho)
+ 50px (borde izquierdo + derecho)
+ 50px (margen izquierdo + derecho)
= 450px

Imagina que solo tienes 250 píxeles de espacio. Vamos a establecer un elemento con un ancho total de 250 píxeles:

La fórmula para calcular el ancho total del elemento es la siguiente:

Ancho total del elemento = ancho + padding izquierdo + padding derecho + borde izquierdo + borde derecho + margen izquierdo + margen derecho

La fórmula para calcular la altura total del elemento es la siguiente:

Altura total del elemento = altura + padding superior + padding inferior + borde superior + borde inferior + margen superior + margen inferior

Problemas de compatibilidad del navegador

Una vez que se ha establecido el DTD adecuado para la página, la mayoría de los navegadores mostrarán el contenido de acuerdo con el diagrama anterior. Sin embargo, el renderizado en IE 5 y 6 es incorrecto. Según la especificación del W3C, el espacio que ocupa el contenido del elemento se define mediante la propiedad width, y los valores de padding y border alrededor del contenido se calculan de manera independiente. Desafortunadamente, IE5.X y 6 utilizan su propio modelo no estándar en el modo quirks. La propiedad width de estos navegadores no es el ancho del contenido, sino la suma del ancho del contenido, el padding y el borde.

Aunque existen métodos para resolver este problema, la mejor solución actual es evitarlo. Es decir, no añadas al elemento un padding con un ancho específico; en su lugar, intenta añadir el padding o el margen a los elementos padre e hijo del elemento.

IE8 y versiones anteriores de IE no admiten configurar las propiedades de ancho del padding y del borde.

Para resolver el problema de incompatibilidad con IE8 y versiones anteriores, basta con declarar <!DOCTYPE html> en la página HTML.