Remove top margin above header R markdown/pagedown in html output

Question

I'm using Pagedown to generate a one-page html document that I can easily print to PDF with formatting (starting from html_paged default pagedown format).

I want to adjust the margin of my documents so that I use the full page space, especially at the top of the page, but I cannot seem to alter the margins. For example, there is always a (large) top margin above the first header of my document resulting in a blank space in my final document.
I'm using customized CSS style sheet to style my document. Setting the margins to 0 in this sheet doesnt reduce the margin in my final output, though the rest of the styling works fine. The page space remains limited.
I tried using:

* {
    margin:0;
    padding:2;  
}

or

header{
  margin-top: 0;
}

or resetting the margins of basically every element I could think of.

But nothing seems to work. Does anyone know what might be the issue?

Answer 1

You need to adjust the page margins via the margin-box properties.

See here for details on adjusting the margins: https://pagedjs.org/documentation/5-web-design-for-print/#margin-size-property

Starting from the default css pagedown files, if you were adjusting the first page then you’d want to adjust the margins in this part of the default-page.css file:

page :first {
  @top-left {
    content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-right {
    content: none !important;
  }
  background-image: var(--front-cover);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

Here’s an example of custom page margins:

@page {
  margin-top: 20mm;
  margin-bottom: 25mm;
  margin-left: 10mm;
  margin-right: 35mm;
}