css layout problem. margin and standard paper size

Question

I am trying to figure out what margins are best for readability and i figure it is best to use standard paper size and margins. I looked it up and its seems like 8.5 is standard. I looked up how to do basic CSS and hit a problem

margin-left: 1.5in; margin-right: 8.0in;

I was excepting the left will start from 1.5 of the left side as well as right being 8in from the left side. It turns out right is 8in from the right ruining my page. How do i set it so the width of the text is 7inches no matter what resolution the user browser is on?

Answer 1

You could set the width of the body to 7 inches. But the browser will automatically lay out the text for you to fit the paper. So I would have set both the left and the right margins to 1.5 inches. You may use a separate CSS file for printing.

Answer 2

You're looking at it backwards: margin-right is the width in from the right-hand side of the viewport (or the piece of paper). So for a 8.5" piece of paper with 1" margins on all sides, you'd want:

body{
      margin-left: 1in;
      margin-right: 1in;
      width: 6.5in;
}

Answer 3

Take a look at the CSS Box Model and Media Type rules. The @page rule (for paged media) may also be of interest.

As has already been said, you should use the width property to define the width of the block-level element. You can then use padding and margin to pad the text and put a margin around its container.

Something like this will let you specify the document style for print:

@media print {
  p {
    font-family: times,serif;
    font-size: 12px
    margin: 1cm 2cm;
    page-break-inside: avoid;
    widows: 2;
    orphans: 2;
  }
}

I would recommend letting the printer software automatically determine the dimensions of the text based on the margins you specify and the page used to print. That way the user can more easily print on whatever dimension paper they want. Here are some print-specific CSS properties you may want to use to format the printed document.

And I believe serif fonts are easier to read on print (or so people say), so that might also be worth considering.