HTML 페이지를 인쇄하는 동안 여백

인쇄를 위해 별도의 스타일 시트를 사용하고 있습니다. 인쇄 여백 (예 : 용지 여백)을 설정하는 스타일 시트에서 오른쪽 및 왼쪽 여백을 설정할 수 있습니까?

감사.

인쇄를 지정할 때 cm또는 mm단위를 사용해야합니다 . 픽셀을 사용하면 브라우저가 화면에서 보이는 것과 유사한 것으로 번역됩니다. 용지에 일관된 크기를 사용 cm하거나 사용 mm합니다.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

글꼴 크기의 pt경우 인쇄 매체에 사용하십시오.

CSS 스타일로 본문의 여백을 설정하면 프린터의 인쇄 가능 영역을 정의하는 프린터 드라이버의 여백 또는 브라우저로 제어되는 여백이 조정 되지 않습니다 (일부 브라우저의 인쇄 미리보기에서 조정 가능). 인쇄 가능 영역 내의 문서에 여백을 설정합니다.

또한 IE7은 ++ 자동으로 최적의 크기를 조정하고, 당신이 사용하는 경우에도 잘못된 모든 것을 원인이 있음을 알고 있어야한다 cm나 mm. 이 동작을 무시하려면 사용자가 '인쇄 미리보기'를 선택한 다음 인쇄 크기를 100%(기본값은 Shrink To Fit) 으로 설정해야합니다 .

인쇄 된 여백을 완전히 제어하는 ​​더 좋은 옵션은 @page지시문을 사용하여 종이 여백을 설정하는 것입니다.이 여백은 일반적으로 브라우저에서 제어하는 ​​html body 요소 외부의 종이 여백에 영향을 미칩니다. http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html을 참조 하십시오 .
이것은 현재 Safari를 제외한 모든 주요 브라우저에서 작동합니다.
Internet Explorer에서는 실제로이 인쇄 설정에서 여백이이 값으로 설정되며 미리보기를 사용하면이 값이 기본값으로 설정되지만 사용자는 미리보기에서 변경할 수 있습니다.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

관련 답변 : 페이지에서 브라우저 인쇄 옵션 (헤더, 바닥 글, 여백)을 비활성화 하시겠습니까?

첫째, 다른 브라우저는 다른 레이아웃을 생성하기 때문에 인쇄 할 때 모든 사용자가 Chrome을 사용하도록 강요합니다.

이 질문에 대한 답변은 다음을 권장합니다.

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

그러나 모든 페이지를 인쇄하기 위해이 CSS를 사용했습니다.

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

특수한 경우 : 긴 테이블

내가 여러 페이지에 걸쳐 테이블을 인쇄하기 위해 필요한 경우, margin:0와 함께 @page출혈 가장자리로 이어지는했다 :

이 답변 덕분 에이 문제를 해결할 수 있습니다.

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

다음에 대한 상단 마진 설정 @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

결과:

오히려 간결하고 모든 브라우저에서 작동하는 솔루션을 선호합니다. 현재 위의 정보가 유사한 문제가있는 일부 개발자에게 도움이되기를 바랍니다.

업데이트 된 간단한 솔루션

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

오래된 솔루션

각 페이지로 섹션을 만들고 아래 코드를 사용하여 여백, 높이 및 너비를 조정하십시오.

A4 크기를 인쇄하는 경우

그런 다음 사용자

크기 : 8.27in 및 11.69 인치

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

그런 다음 모든 콘텐츠가 포함 된 div를 만듭니다.

<div class="Section1"> 
    type your content here... 
</div>

개인적으로와 다른 측정 단위를 사용하는 것이 좋습니다 px. 나는 픽셀이 인쇄와 관련하여 많은 관련이 있다고 생각하지 않습니다. 이상적으로는 다음을 사용하십시오.

• 포인트 (pt)
• 센티미터 (cm)

나는 다른 것들이 있다고 확신하며 print-css에 대한 훌륭한 기사는 Eric Meyer의 Going to Print 에서 찾을 수 있습니다 .

pt 대 cm 또는 mm이 더 정확하므로 권장합니다. 또한 @page를 Chrome에서 사용할 수 없습니다 (버전 30.0.1599.69 m) 여백에 상관없이 내가 여백에 넣은 것은 무시합니다. 그러나 문서에서 본문 여백으로 작동하도록 할 수 있습니다.

대상 용지 크기를 알고 있으면 해당 특정 크기의 DIV에 컨텐츠를 배치하고 해당 DIV에 여백을 추가하여 인쇄 여백을 시뮬레이션 할 수 있습니다. 불행히도 인쇄 대화 상자를 표시하는 것 외에 인쇄 기능을 추가로 제어 할 수 있다고 생각하지 않습니다.