CSS bleed Property

The bleed property in CSS is used in paged media to specify how far the content extends beyond the page’s trim box (print margins). Print layouts primarily use this to ensure content like images or backgrounds extend slightly beyond the edges, preventing white borders when trimmed.

1. Syntax

@page {
  bleed: [length | auto];
}

Accepted Values:

Value	Description
auto	The default value lets the browser or printer decide the bleed area.
<length>	Specifies the bleed size in units like mm, px, cm, or in.

2. Example – Setting a Bleed Area

@page {
  size: A4;
  margin: 0;
  bleed: 5mm;
}

✅ This ensures the content extends 5mm beyond the page's trim edge.

3. Why Use bleed?

✔ Prevents unwanted white borders in print materials.
✔ Ensures a professional print layout for flyers, magazines, and books.
✔ Commonly used in print design to align with trim marks.

4. Best Practices

✔ Use bleed in combination with @page for print layouts.
✔ Typically set between 3mm - 5mm for professional printing.
✔ Check with your printer's requirements to ensure correct settings.