Các giá trị thiết lập kích thước trang (@page) trong CSS

Quy tắc @page và thuộc tính size

Quy tắc @page trong CSS dùng để định dạng trang khi in (print media). Thuộc tính size xác định kích thước và hướng của hộp trang (page box).

4 giá trị của size

Giá trị	Mô tả
`auto`
Hộp trang tự động theo kích thước và hướng của giấy in (mặc định)
`landscape`	Ghi đè hướng giấy: cạnh dài nằm ngang (ngang)
`portrait`	Ghi đè hướng giấy: cạnh ngắn nằm ngang (dọc - mặc định)
`<length>`	Kích thước tuyệt đối (mm, cm, in, px...). 1 giá trị = width & height. Không cho phép %

Ví dụ: Căn trang A4 với margin 10%

@page {
  size: auto; /* hoặc 21cm 29.7cm cho A4 */
  margin: 10%; /* 2.1cm x 2.97cm trên giấy A4 */
}

Ví dụ hoàn chỉnh cho in ấn

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      size: A4 portrait; /* 210mm x 297mm */
      margin: 2cm;
      @top-center { content: "Header - Trang " counter(page); }
      @bottom-center { content: "Footer - Công ty ABC"; }
    }
    @media print {
      .no-print { display: none; }
    }
  </style>
</head>
<body>
  <div class="no-print"><button onclick="window.print()">In trang này</button></div>
  <h1>Báo cáo tháng</h1>
  <p>Nội dung báo cáo...</p>
</body>
</html>

Lưu ý

Chỉ hoạt động trong @media print hoặc khi in (Ctrl+P)
Hỗ trợ tốt trên Chrome, Firefox, Edge hiện đại
Đơn vị khuyến nghị: mm, cm, in cho in ấn