htmlcssr-markdownmarginpagedown

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


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?


Solution

  • 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;
    }