CSS
El modelo de caja

Sintaxis

• tamaño de caja: parámetro ;

Parámetros

Observaciones

¿Qué es el modelo de caja?

Los bordes

El navegador crea un rectángulo para cada elemento en el documento HTML. El modelo de caja describe cómo se agregan el relleno, el borde y el margen al contenido para crear este rectángulo.

Diagrama del borrador de trabajo CSS2.2

El perímetro de cada una de las cuatro áreas se llama borde . Cada borde define una caja.

• El rectángulo más interno es el cuadro de contenido . El ancho y el alto de esto dependen del contenido renderizado del elemento (texto, imágenes y cualquier elemento secundario que pueda tener).
• El siguiente es el cuadro de relleno , como lo define la propiedad de padding . Si no hay un ancho de padding definido, el borde de relleno es igual al borde de contenido.
• Luego tenemos el cuadro de borde , como lo define la propiedad de border . Si no hay un ancho de border definido, el borde del borde es igual al borde de relleno.
• El rectángulo más externo es el cuadro de margen , como lo define la propiedad de margin . Si no hay un ancho de margin definido, el borde del margen es igual al borde del borde.

Ejemplo

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Este CSS da estilo a todos los elementos div para que tengan un borde superior, derecho, inferior e izquierdo de 5 5px de ancho; un margen superior, derecho, inferior e izquierdo de 50px ; y un relleno superior, derecho, inferior e izquierdo de 20px . Ignorando el contenido, nuestro cuadro generado se verá así:

Captura de pantalla del panel de estilos de elementos de Google Chrome

• Como no hay contenido, la región de contenido (el cuadro azul en el centro) no tiene altura ni ancho (0px por 0px).
• El cuadro de relleno por defecto es del mismo tamaño que el cuadro de contenido, más el ancho de 20 px en los cuatro bordes que definimos anteriormente con la propiedad de padding (40 px por 40 px).
• El cuadro de borde es del mismo tamaño que el cuadro de relleno, más el ancho de 5 px que definimos anteriormente con la propiedad de border (50 px por 50 px).
• Finalmente, el cuadro de margen es del mismo tamaño que el cuadro de borde, más el ancho de 50 px que definimos anteriormente con la propiedad de margin (lo que otorga a nuestro elemento un tamaño total de 150 px por 150 px).

Ahora vamos a darle a nuestro elemento un hermano con el mismo estilo. El navegador mira el modelo de caja de ambos elementos para averiguar dónde, en relación con el contenido del elemento anterior, el nuevo elemento debe colocarse:

El contenido de cada elemento está separado por un espacio de 150px, pero los cuadros de los dos elementos se tocan entre sí.

Si luego modificamos nuestro primer elemento para que no tenga margen derecho, el borde del margen derecho estaría en la misma posición que el borde del borde derecho, y nuestros dos elementos se verían así:

tamaño de caja

El modelo de cuadro predeterminado (cuadro de content-box ) puede ser contraintuitivo, ya que el width / height de un elemento no representará su ancho o alto real en la pantalla tan pronto como comience a agregar estilos de border y padding al elemento.

El siguiente ejemplo demuestra este problema potencial con content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Dado que el relleno se agregará al ancho del área de texto, el elemento resultante es un área de texto que es más ancho que el 100%.

Afortunadamente, CSS nos permite cambiar el modelo de caja con la propiedad de box-sizing para un elemento. Hay tres valores diferentes para la propiedad disponible:

• content-box : el modelo de cuadro común: ancho y alto solo incluye el contenido, no el relleno ni el borde

• padding-box : ancho y alto incluye el contenido y el relleno, pero no el borde

• border-box : el ancho y la altura incluyen el contenido, el relleno y el borde

Para resolver el problema de área de textarea anterior, simplemente puede cambiar la propiedad de box-sizing a padding-box o border-box . border-box es el más utilizado.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Para aplicar un modelo de caja específico a cada elemento de la página, use el siguiente fragmento de código:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

En este box-sizing:border-box; codificación: box-sizing:border-box; no se aplica directamente a * , por lo que puede sobrescribir fácilmente esta propiedad en elementos individuales.