Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

CSS Box model

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

Si la propiedad box-sizing está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de width, min-width, max-width, height, min-height y max-height.

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

El espesor del relleno está determinado por las propiedades padding-top, padding-right, padding-bottom, padding-left, y la propiedad abreviada padding.

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

El espesor de los bordes está determinado por las propiedades border-width y la propiedad abreviada border. Si la propiedad box-sizing se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades width, min- width, max-width, height, min-height, y max-height.

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

El tamaño del área del margen está determinado por las propiedades margin-top, margin-right, margin-bottom, { {cssxref("margin-left")}}, y la propiedad abreviada margin. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad line-height, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

Especificación

Especificación Estado Comentario
CSS Level 2 (Revision 1) Recommendation Aunque está redactado con más precisión, no hay cambio práctico.
CSS Level 1 Recommendation Definición inicial

Vea también

Etiquetas y colaboradores del documento

Colaboradores en esta página: tipoqueno
Última actualización por: tipoqueno,