0

Context:

  1. I'm trying to make a webpage that is exactly 210mm wide and 297mm tall, because I want it to be perfectly printed on an A4-type paper sheet.
  2. However, the webpage automatically gets small left and top margins that result in the right portion of the page being cut when printed.
  3. These borders are painted in pink in the screenshot below. The other colors are elements of the page that I wrote code for them to exist. They are correct.
  4. I'm using Firefox 129.0.2 (64-bits) on Windows 10 22H2.

Border

Question: how these margins are being generated? How can I get rid of them?

CSS:

<style>
<!-- Início: configuração A4 -->
    html body {
        box-sizing: border-box;
        width:210mm;
        height:297mm;
    }
    
    div.page {
        background-color: green;
        box-sizing: border-box;
        width:210mm;
        height:297mm;
        page-break-after: always;
        border: 1px solid black;
    }
<!-- Fim: configuração A4 -->

    tr:hover {background-color: #D6EEEE;}

    table{
        width:100%;
    }
    
    table tbody tr th {
        text-align: left;
    }
    
    table tbody tr td time {
        float: right;
    }
    
    h1, h2, h3, h4, h5, h6 {
        text-align: center;
        background-color: Grey;
        color: white;
    }
    
    table thead tr {
        text-align: center;
        background-color: DarkGrey;
    }
    
    section {
        border-top   : 1px solid black;
        border-bottom: 1px solid black;
    }
    
</style>

HTML:

<body>
<div name="front" class="page">
<section>
<h1>Stack Exchange</h1>
<p>Lorem ipsum</p>
</section>
</div>
</body>
Improve this question
3
  • "I'm trying to make a webpage that is exactly 210mm wide and 297mm tall," - Just don't. The web was not designed for this. Convert the web page to a PDF - thats what PDF is used for. If you absolutely have to do it you should be doing it within an @media block.
    – davidgo
    Commented Sep 4 at 10:46
  • @davidgo The webpage has the exact size of the PDF that will be generated. I make the webpage and the user generate the PDF.
    – BsAxUbx5KoQDEpCAqSffwGy554PSah
    Commented Sep 5 at 12:08
  • CSS can add style hints to a web page but a webpage can not be "an exact size" - indeed this is the underlying premise of HTML. Forcing a page size is an abomination. If you must use it, you should be using inside an @page rule for printing purposes only (developer.mozilla.org/en-US/docs/Web/CSS/@page).
    – davidgo
    Commented Sep 9 at 0:46

1 Answer 1

Reset to default
2

If you are seeing this margin in the browser as well as the printed document, then it will be down to the user-agent-stylesheet. Try adding the following to reset it to 0.

body {
  margin: 0;
}

If it is just on the printed document, then your printer dialogue will probably have settings for "margins", which you may need to change to "none".

Also, your comments should be in the following format, or else they will not validate.

/* Fim: configuração A4 */
Improve this answer
5
  • 1) I'm seeing both on the browser as well as in the printed document; 2) adding "margin: 0;" did not change anything.
    – BsAxUbx5KoQDEpCAqSffwGy554PSah
    Commented Aug 28 at 13:36
  • Update: it works when I do <body style="margin: 0; padding: 0;">, but not when I do it through the <style></style> in the header. Why? It is supposed to work both ways.
    – BsAxUbx5KoQDEpCAqSffwGy554PSah
    Commented Aug 28 at 13:59
  • 2
    I think it's just your comment code isn't valid. Try removing <!-- Fim: configuração A4 --> - comments in CSS should be of the format /* */
    – RichardB
    Commented Aug 28 at 15:08
  • Would you like to provide that as an answer so I can accept it?
    – BsAxUbx5KoQDEpCAqSffwGy554PSah
    Commented Aug 28 at 17:15
  • I've added that.
    – RichardB
    Commented Aug 28 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.