El modelo de caja

Dale a una caja width: 200px, 16px de padding y un borde de 2px, y por defecto ocupará 236 píxeles de ancho en la pantalla, no 200.

Cada elemento es una caja

Para maquetar una página, el navegador convierte cada elemento en un rectángulo. Cada caja tiene cuatro capas, de dentro hacia fuera. El área de contenido contiene el texto o la imagen. El relleno (padding) es el espacio dentro de la caja, entre el contenido y el borde, y toma el color de fondo de la caja. El borde es una línea alrededor del relleno. El margen es el espacio fuera del borde que aparta a las demás cajas; siempre es transparente. Las herramientas para desarrolladores del navegador dibujan exactamente este diagrama cuando inspeccionas un elemento, con los números puestos.

Forma abreviada para los cuatro lados

padding, margin y border-width aceptan de uno a cuatro valores, en el sentido de las agujas del reloj empezando por arriba. padding: 16px fija los cuatro lados. padding: 8px 16px fija arriba y abajo en 8, e izquierda y derecha en 16. padding: 4px 8px 12px 16px fija arriba, derecha, abajo e izquierda, en ese orden. Cada lado también se puede fijar por separado, como en margin-top. border: 2px solid #333 fija a la vez el ancho, el estilo y el color; sin un estilo como solid o dashed no se dibuja ningún borde.

box-sizing: el ajuste que casi todo el mundo cambia

Por defecto, width y height fijan solo el tamaño del área de contenido, y el relleno y el borde se suman por encima. Ese es el modelo content-box, y complica la maquetación: dos cajas con width: 50% y algo de relleno ya no caben una al lado de la otra. Con box-sizing: border-box, el ancho incluye el relleno y el borde, y el área de contenido se encoge para dejarles sitio. Muchas hojas de estilos empiezan aplicándolo a todos los elementos con *, *::before, *::after { box-sizing: border-box; }.

Cajas de bloque y cajas en línea

Las cajas se comportan de forma distinta según su valor de display. Las cajas de bloque, como p, h1 y section, empiezan en una línea nueva y se estiran hasta llenar el ancho de su contenedor. Las cajas en línea, como a, strong y span, van dentro de una línea de texto; width y height no se les aplican, y su relleno y margen verticales no apartan a las demás líneas. display: inline-block queda en medio: la caja fluye dentro de la línea como una palabra, pero respeta el ancho, el alto y el relleno, lo que viene bien para etiquetas pequeñas y botones.

Márgenes que colapsan

Hay una regla que sorprende a casi todos. Cuando el margen inferior de un bloque se encuentra con el margen superior del siguiente, no se suman: gana el mayor. Un párrafo con margin-bottom: 20px seguido de un encabezado con margin-top: 30px queda a 30 píxeles de distancia, no a 50. Esto se llama colapso de márgenes, y solo ocurre con los márgenes verticales entre bloques en el flujo normal, no dentro de contenedores flex o grid. Para centrar un bloque en horizontal, dale un width o un max-width y margin: 0 auto: los dos márgenes laterales automáticos se reparten por igual el espacio libre.