htmlcsscss-print

Chrome Printing setting 1 inch margins


I am using this CSS to set a margin around my html document when a user wants to print it, however when I look at the print more setting options is not set to custom and I am not seeing a 1 in margin.

@media print {
    body {
        min-width: 1000px;
    }
    page {
        margin-top: 1in;
        margin-bottom: 1in;
        margin-left:1in;
        margin-right:1in;
    }
   .container { display: block; }

    div, p, ..etc { page-break-inside: auto; }
}

enter image description here


Solution

  • Good day. Your issue likely stems from two main problems: 1. The selector is incorrect – CSS does not recognize a page element unless explicitly defined in a @page rule. 2. Margins should be set inside @page – The correct way to apply print margins is using @page. Solution Modify your CSS like this:

    @media print {
        @page {
            margin: 1in; /* Sets 1-inch margins for printing */
        }
    
        body {
            min-width: 1000px;
        }
    
        .container { 
            display: block; 
        }
    
        div, p {
            page-break-inside: auto; 
        }
    }
    
    
    
    •   @page is specifically designed for defining print settings, including margins.
    •   The margin inside @page ensures that browsers recognize the 1-inch setting instead of defaulting to the system’s print settings.
    •   The page selector in your code does not exist in standard HTML and does not affect print styling.
    

    Now, when printing, check the print preview settings to confirm the margin is set correctly.