Cómo eliminar márgenes de impresión de una página web con CSS

Tenía que imprimir una nota de remisión para una aplicación web que hice pero necesitábamos aprovechar la hoja tamaño carta al 100% para no desperdiciar. Intentamos imprimir desde el navegador pero por defecto el navegador deja 2cm aproximadamente de margen.

Opte por hacer la nota en Flash, pero aun así deja 1cm de margen, entonces investigando mucho, encontre una opción en CSS que manipula el margen de impresión.

Definir que los estilos CSS del documento html es para impresión

Hay 2 maneras de decirle a el navegador que se aplicaran estilos de impresión, enlazando el archivo de CSS o directo en el documento HTML.

Código :

<link rel="stylesheet" href="estilos.css" type="text/css" media="print" />

De esta manera enlazamos el archivo de CSS pero le decimos que son estilos para impresión de la pagina web.

Ahora veamos como seria directo en el HTML.

Código :

<style type="text/css" media="print"></style>

Es algo sencillo, no es nada de magia ni nada avanzado, solo es un atributo mas de la etiqueta STYLE al igual que la etiqueta LINK.

Manipular los margenes de impresión con CSS

Hay una opción para manipular el margen de una pagina, es algo tan sencillo de usar y que casi nadie he visto que hable de ella, una sintaxis que me salvo de una frustración tan grande, en Google Docs cuando haces un documento, si modificas los margenes o sangrias a 0cm y previsualizas la impresión, los margenes si los respeta con 0cm.

Para lograrlo es muy facil, solo sigan este ejemplo:

Código :

<style type="text/css" media="print">
@page{
   margin: 0;
}
</style>

Es algo tan simple, con esas 3 lineas de código, ahora podemos manipular la pagina de impresión.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.