html 페이지 인쇄 중 여백

html 페이지 인쇄 중 여백

저는 인쇄할 때 별도의 스타일시트를 사용하고 있습니다.

인쇄 마진을 설정하는 스타일시트에 오른쪽과 왼쪽 마진을 설정할 수 있습니까?(서류상 여백)

당신은 사용해야 합니다.cm아니면mm인쇄를 위해 지정할 때 단위로 사용합니다.픽셀을 사용하면 브라우저가 화면에 나타나는 것과 유사한 것으로 변환됩니다.사용.cm아니면mm종이에 일관된 크기를 보장할 것입니다.

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

글꼴 크기의 경우pt인쇄 매체의 경우.

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

IE7++는 자동으로 사이즈가 가장 잘 맞게 조정되며, 사용해도 모든 것이 잘못된다는 것도 알아두셔야 합니다.cm아니면mm. 이 동작을 재정의하려면 사용자가 '인쇄 미리보기'를 선택한 다음 인쇄 크기를 다음과 같이 설정해야 합니다.100%(기본값은Shrink To Fit).

인쇄된 여백을 완전히 제어하기 위한 더 나은 옵션은@page일반적으로 브라우저가 제어하는 html 본문 요소 외부의 종이 여백에 영향을 미치는 종이 여백을 설정하는 지시.http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html 를 참조하십시오.
이것은 현재 사파리를 제외한 모든 주요 브라우저에서 작동합니다.
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;  
} 

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

첫째, 다른 브라우저는 다른 레이아웃을 만들기 때문에 인쇄할 때 모든 사용자에게 크롬을 사용하도록 강요하려고 합니다.

이 질문에 대한 대답은 다음과 같습니다.

@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.69inch

@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 class="Section1"> 
    type your content here... 
</div>

Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ px인쇄 큰합니다. 으로 다음을 픽셀은 인쇄 측면에서 큰 관련성이 없다고 생각합니다. 이상적으로 다음을 사용합니다.

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

인쇄-CSS에 관한 훌륭한 기사를 여기에서 찾아볼 수 있습니다. 에릭 마이어의 "인쇄로 가기"입니다.

pt 대 cm 또는 mm가 더 정확해서 추천합니다.또한 Chrome(버전 30.0.1599.69m)에서 @page를 작동시킬 수 없습니다. 크든 작든 마진에 대한 모든 것을 무시합니다.하지만 서류에 신체 여백을 붙여 작동시킬 수도 있어요, 이상하죠.

이 방법을 사용해 볼 수도 있습니다. 상위 음의 마진을 사용하기 위해서요.

@media print {
 @page {
   /* size: 210mm 297mm;  */
   margin: -110mm 16mm 27mm 16mm; 
 }

}

목표 용지 크기를 알고 있는 경우 해당 크기의 DIV에 내용물을 넣고 해당 DIV에 여백을 추가하여 인쇄 여백을 시뮬레이션할 수 있습니다.유감스럽게도 인쇄 대화 상자를 표시하는 것 외에 인쇄 기능에 대한 추가적인 제어권이 있다고 생각하지 않습니다.

언급URL : https://stackoverflow.com/questions/1542320/margin-while-printing-html-page