Modelo de Caja¶
A la hora de diseñar una página, el motor del navegador representará cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, posición y propiedades (color, fondo, etc.) de estos cuadros.1
La caja se compone de cuatro elementos:
- Límite de contenido: con su ancho y alto, es el espacio práctico donde se renderizan los hijos.
- Límite de relleno (padding): se denomina padding al espacio que hay entre el borde y el límite del contenido.
- Límite del borde (border): será el espacio que ocuparán los bordes de la caja.
- Límite del margen (margin): es el espacio que hay entre la caja y las otras cajas (dos márgenes de dos elementos distintos "no" se solaparán).
Clica aquí para ver los elementos
box-sizing¶
El modelo de caja se aplica en CSS mediante la propiedad box-sizing. Esta puede tomar dos valores diferentes:
content-box(predeterminada): border y padding no entran en el cómputo para width y heightborder-box: border y padding sí entran en el cómputo para width y height
Es recomendable utilizar el método border-box, de tal forma que la parte "visible" esté siempre computable dentro
del ancho y el alto del elemento (a pesar de que la predeterminada sea otra).
-
Tomado de Introducción al Modelo de Caja de CSS, de MDN Web Docs. ↩
Última actualización:
27 de marzo de 2023