La regla @page y el área de página

La regla @page fija el tamaño de cada hoja impresa. Usa un nombre (Letter, A4, Legal) o dimensiones exactas. Si lo omites, cada navegador o motor cae en su propio default (a menudo Letter en EE. UU. y A4 fuera), y el mismo archivo se pagina distinto en cada máquina.

El margin de @page es el borde de papel blanco alrededor del área de contenido, y es donde viven encabezados, pies y folios. Cuando la página lleva un fondo de color que debe llegar al borde, pon margin: 0; si no, Chrome deja márgenes de papel blancos aunque el body sea oscuro. Ver la sección fondos-dark.

Con @page { margin: 0 } el fondo llega al borde, pero ya nada aleja el texto del corte. Mueve la zona segura a un contenedor de contenido como padding (por ejemplo .doc { padding: 15mm 16mm }). El color llena la hoja mientras el texto queda dentro de su zona segura.

Para un trim no estándar, da a size dos longitudes: ancho y luego alto, en mm o in. El píxel es una unidad de pantalla sin significado físico fijo, así que size: 794px 1123px solo coincide con A4 a exactamente 96 dpi y se desvía en otro caso. Especifica siempre las dimensiones de impresión en milímetros o pulgadas.

Las pseudoclases de pliego permiten que un solo documento lleve configuraciones distintas. @page :first apunta solo a la primera página (típicamente una portada sin encabezado), mientras :left y :right apuntan a pares e impares. También existe :blank para páginas vacías intencionales. Todas cascadean sobre el @page base.

En trabajo encuadernado el lomo se come el borde interior, así que el margen interior (lomo) debe ser mayor que el exterior. Como el lomo está a la derecha de una página par y a la izquierda de una impar, espeja los márgenes: da a :left más margin-right y a :right más margin-left. Motores con cajas lógicas aceptan margin-inside / margin-outside.

Para un archivo que va a imprenta, agrega bleed y marks a @page. bleed: 3mm extiende la caja de página más allá del trim para que el arte full-bleed tenga tolerancia, y marks: crop cross dibuja marcas de corte y cruces de registro fuera del trim. Lo soportan Paged.js y Prince; Chrome headless lo ignora, así que ahí hay que post-procesar.

El tamaño, el margen, el sangrado y las cajas de margen deciden cuánto espacio tiene cada página, y toda regla de quiebre (break-inside, widows, encabezados corrientes) se mide contra esa caja. Cierra primero la configuración de @page y luego acomoda el contenido dentro. Cambiar el tamaño después reflowía todos los quiebres y deshace cualquier ajuste manual.

El margen de @page aloja dieciséis cajas de margen (@top-left, @top-center, @bottom-right, etc.) donde viven encabezados corrientes, pies y números de página. Define ahí su content y los counters en lugar de forzar HTML posicionado. Chrome headless no renderiza cajas de margen, así que usa Paged.js, Prince o WeasyPrint. Ver la sección corrientes.

La pantalla tiene un viewport fluido; la hoja es una caja física fija. Mantén @page y los ajustes solo de paginación dentro de @media print, y úsalo para ocultar el chrome de pantalla (navbars, botones), cambiar a serif de cuerpo y forzar fondo claro. Un tema oscuro en pantalla no debe imprimirse; la impresión va en claro por default. Ver la sección recetas.

Mezclar tamaños confunde la encuadernación y la configuración de impresión, así que mantén un solo @page maestro para todo el documento. Cuando una tabla ancha o un pliego realmente necesitan landscape, declara una página nombrada (@page landscape { size: A4 landscape }) y engancha elementos específicos con la propiedad page, en vez de cambiar el tamaño global.