El modelo de caja CSS

Cómo trabajar con el modelo de caja CSS

Cada elemento CSS es esencialmente una caja. Cada elemento es una caja genérica.

El modelo de caja explica el tamaño de los elementos basándose en algunas propiedades CSS.

Desde adentro hacia afuera, tenemos:

  • el área de contenido
  • relleno
  • frontera
  • margen

La mejor forma de visualizar el modelo de caja es abrir el navegador DevTools y comprobar cómo se muestra:

Aquí puedes ver cómo Firefox me dice las propiedades de unspanelemento que destaqué. Hice clic derecho en él, presioné Inspeccionar elemento y fui al panel Diseño de DevTools.

Mira, el espacio azul claro es el área de contenido. Rodeándolo está el relleno, luego el borde y finalmente el margen.

De forma predeterminada, si establece un ancho (o alto) en el elemento, eso se aplicará alárea de contenido. Todos los cálculos de relleno, borde y margen se realizan fuera del valor, por lo que debe tener esto en cuenta cuando realice el cálculo.

Puede cambiar este comportamiento utilizando Box Sizing.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: