Values to set page size in CSS

CSSWeb DevelopmentFront End Technology

There are four values that can be used to set page size −

  • auto − The page box will be set to the size and orientation of the target sheet.
  • landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.
  • portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.
  • length − Length values for the 'size' property create an absolute page box. If only one length value is specified, it sets both the width and height of the page box. Percentage values are not allowed for the 'size' property.

In the following example, the outer edges of the page box will align with the target. The percentage value of the 'margin' property is relative to the target size so if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.

<style type = "text/css">
   <!--
      @page {
         size: auto; /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>
raja
Published on 30-Apr-2018 07:22:47
Advertisements