Modelo de caja CSS

En el desarrollo web , el modelo de caja CSS se refiere a cómo se modelan los elementos HTML en los motores de los navegadores y cómo las dimensiones de esos elementos HTML se derivan de las propiedades CSS . Es un concepto fundamental para la composición de páginas web HTML . ^{[ 3 ]} Las directrices del modelo de caja están descritas por los estándares web del Consorcio World Wide Web (W3C), específicamente el Grupo de Trabajo CSS. Durante gran parte de finales de la década de 1990 y principios de la de 2000 hubo implementaciones no conformes con el estándar del modelo de caja en los navegadores más populares. Con la llegada de CSS2 en 1998, que introdujo la box-sizingpropiedad, el problema se resolvió en gran medida.

La especificación de Hojas de Estilo en Cascada (CSS) describe cómo los navegadores gráficos muestran los elementos de las páginas webp . La Sección 4 de la especificación CSS1 define un "modelo de formato" que otorga a los elementos de nivel de bloque —como <p> y blockquote<div>— un ancho y una altura, y tres niveles de cajas que los rodean: relleno, bordes y márgenes. ^{[ 4 ]} Si bien la especificación nunca utiliza explícitamente el término "modelo de caja", este se ha popularizado entre los desarrolladores web y los proveedores de navegadores web.

Todos los elementos HTML pueden considerarse "cajas", esto incluye divla etiqueta <p>, pla etiqueta <p> o ala etiqueta <div>. Cada una de esas cajas tiene cinco dimensiones modificables:

• y describe las dimensiones del contenido real de la caja (texto, imágenes, ... height)width
• describe paddingel espacio entre este contenido y el borde del cuadro
• la borderes cualquier tipo de línea (continua, punteada, discontinua...) que rodea el cuadro, si está presente
• es marginel espacio alrededor del borde

Según la especificación CSS1, publicada por el W3C en 1996 y revisada en 1999, cuando se especifica explícitamente un ancho o alto para cualquier elemento de nivel de bloque, este debe determinar solo el ancho o alto del elemento visible, y el relleno, los bordes y los márgenes se aplican posteriormente. ^{[ 4 ] [ 5 ]} Antes de CSS3, este modelo de caja se conocía como modelo de caja del W3C ; en CSS3, se conoce como content-box.

Por lo tanto, el ancho total de una caja es margin-left+ border-left+ padding-left+ width+ padding-right+ border-right+ margin-right. De manera similar, la altura total de una caja es igual a margin-top+ border-top+ padding-top+ height+ padding-bottom+ border-bottom+ margin-bottom.

Por ejemplo, el siguiente código CSS

.my - class { width : 200px ; height : 100px ; padding : 10px ; border : solid 10px black ; margin : 10px ; }​​​​

Se especificarían las dimensiones de cada bloque perteneciente a 'my-class'. Además, cada caja tendrá una altura total de 140 px y un ancho de 240 px.

CSS3 introdujo el modelo de caja de Internet Explorer en el estándar, conocido como border-box. ^{[ 6 ]}

Antes de HTML 4 y CSS, muy pocos elementos HTML admitían bordes y relleno, por lo que la definición del ancho y alto de un elemento no era muy controvertida. Sin embargo, variaba según el elemento. El atributo de ancho de HTML de una tabla definía el ancho de la tabla incluyendo su borde. ^{[ 7 ]} Por otro lado, el atributo de ancho de HTML de una imagen definía el ancho de la imagen en sí (dentro de cualquier borde). ^{[ 8 ]} El único elemento que admitía relleno en aquellos primeros tiempos era la celda de tabla. El ancho de la celda se definía como "el ancho sugerido para el contenido de una celda en píxeles, excluyendo el relleno de la celda". ^{[ 9 ]}

En 1996, CSS ^{[ 10 ]} introdujo margen, borde y relleno para muchos más elementos. Adoptó una definición de ancho en relación con el contenido, el borde, el margen y el relleno similar a la de una celda de tabla. ^{[ 11 ]} Esto se conoce desde entonces como el modelo de caja del W3C .

En aquel entonces, muy pocos proveedores de navegadores implementaron el modelo de caja del W3C al pie de la letra. Los dos principales navegadores de la época, Netscape 4.0 e Internet Explorer 4.0 , definían el ancho y la altura como la distancia de borde a borde. ^{[ 12 ]} Esto se ha denominado el modelo de caja tradicional ^{[ 6 ]} o el modelo de caja de Internet Explorer . ^{[ 13 ]}

Internet Explorer en " modo peculiar " incluye el contenido, el relleno y los bordes dentro de un ancho o alto especificado; esto da como resultado una representación más estrecha o más corta de un cuadro que la que resultaría siguiendo el comportamiento estándar. ^{[ 14 ]}

El comportamiento del modelo de caja de Internet Explorer a menudo se consideraba un error, debido a la forma en que las versiones anteriores de Internet Explorer manejaban el modelo de caja o el tamaño de los elementos en una página web, que difiere de la forma estándar recomendada por el W3C para el lenguaje de hojas de estilo en cascada . ^{[ 15 ] [ 16 ]} A partir de Internet Explorer 6 , el navegador admite un modo de renderizado alternativo (llamado "modo compatible con estándares") que resuelve esta discrepancia. Sin embargo, por razones de compatibilidad con versiones anteriores, todas las versiones siguen comportándose de la forma habitual, no estándar, por defecto (ver modo peculiar ). Internet Explorer para Mac no se ve afectado por este comportamiento no estándar.

El diseñador web Doug Bowman ha dicho que el modelo de caja original de Internet Explorer representa un enfoque mejor y más lógico. ^{[ 20 ]} Peter-Paul Koch da el ejemplo de una caja física, cuyas dimensiones siempre se refieren a la caja en sí, incluyendo el posible relleno, pero nunca a su contenido. ^{[ 6 ]} Dice que este modelo de caja es más útil para los diseñadores gráficos, que crean diseños basados ​​en el ancho visible de las cajas en lugar del ancho de su contenido. ^{[ 21 ]} Bernie Zimmermann dice que el modelo de caja de Internet Explorer está más cerca de la definición de dimensiones de celda y relleno utilizada en el modelo de tabla HTML. ^{[ 22 ]}

El W3C ha incluido una propiedad "box-sizing" en CSS3. Cuando box-sizing: border-box;se especifica para un elemento, cualquier relleno o borde del elemento se dibuja dentro del ancho y alto especificados, "como comúnmente lo implementan los agentes de usuario HTML heredados". ^{[ 23 ]} Internet Explorer 8 , los navegadores WebKit como Apple Safari 5.1+ y Google Chrome , los navegadores basados ​​en Gecko como Mozilla Firefox 29.0 y posteriores, Opera 7.0 y posteriores, y Konqueror-moz-box-sizing 3.3.2 y posteriores admiten la propiedad CSS3 box-sizing. Los navegadores Gecko anteriores a 29.0 admiten la misma funcionalidad usando la propiedad específica del navegador . ^{[ 24 ]}border-box es el modelo de caja predeterminado utilizado en el marco Bootstrap .

• Diseño (informática)

• Especificación del modelo de caja del consorcio World Wide Web (W3C).
• Un tutorial sobre el modelo de caja CSS.
• Descripción de Tantek Çelik del "truco del modelo de caja"
• Cómo lograr que Internet Explorer funcione correctamente con CSS : artículo en about.com que describe varias maneras de solucionar el problema del modelo de caja y otros errores de IE.
• Compatibilidad con hojas de estilo en cascada (CSS) en Internet Explorer 7 – Artículo de MSDN, julio de 2006.
• Diferencias en el modelo de caja CSS entre Firefox e Internet Explorer : explicación adicional de las diferencias de representación entre Mozilla Firefox e Internet Explorer.