Margines podczas drukowania strony html

Do drukowania używam osobnego arkusza stylów. Czy można ustawić prawy i lewy margines w arkuszu stylów, który określa margines wydruku (tj. Margines na papierze)?

Dzięki.

Podczas określania drukowania należy używać cmlub mmjako jednostki. Używanie pikseli spowoduje, że przeglądarka przetłumaczy to na coś podobnego do tego, co wygląda na ekranie. Użycie cmlub mmzapewni spójny rozmiar papieru.

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

W przypadku rozmiarów czcionek użyj ptdla nośnika wydruku.

Zwróć uwagę, że ustawienie marginesu na korpusie w stylu css nie dostosuje marginesu w sterowniku drukarki, który definiuje obszar drukowania drukarki, ani marginesu kontrolowanego przez przeglądarkę (może być regulowany w podglądzie wydruku w niektórych przeglądarkach) ... po prostu ustawi margines na dokumencie w obszarze drukowania.

Należy również pamiętać, że IE7 ++ automatycznie dostosowuje rozmiar do najlepszego dopasowania i powoduje, że wszystko jest nie tak, nawet jeśli używasz cmlub mm. Aby zmienić to zachowanie, użytkownik musi wybrać opcję „Podgląd wydruku”, a następnie ustawić rozmiar wydruku na 100%(domyślnie Shrink To Fit).

Lepszą opcją pełnej kontroli nad drukowanymi marginesami jest użycie @pagedyrektywy w celu ustawienia marginesu papieru, co wpłynie na margines na papierze poza elementem treści html, który jest zwykle kontrolowany przez przeglądarkę. Zobacz http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Obecnie działa to we wszystkich głównych przeglądarkach z wyjątkiem Safari.
W przeglądarce Internet Explorer margines jest faktycznie ustawiony na tę wartość w ustawieniach tego drukowania, a jeśli zrobisz Podgląd, otrzymasz to domyślnie, ale użytkownik może to zmienić w podglądzie.

@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;  
} 

Powiązana odpowiedź: Czy wyłączyć opcje drukowania przeglądarki (nagłówki, stopki, marginesy) ze strony?

Po pierwsze, próbuję zmusić wszystkich moich użytkowników do korzystania z Chrome podczas drukowania, ponieważ inne przeglądarki tworzą różne układy.

Odpowiedź na to pytanie zaleca:

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

Jednak skończyło się na tym, że użyłem tego CSS do wydrukowania wszystkich moich stron:

@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;
    }
}

Przypadek specjalny: długie stoły

Kiedy musiałem wydrukować tabelę na kilku stronach, znak margin:0z @pagekropką prowadził do krwawienia krawędzi:

Mogłem to rozwiązać dzięki tej odpowiedzi :

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

Plus ustawienie górnych dolnych marginesów dla @page:

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

Wynik:

Wolałbym rozwiązanie, które jest zwięzłe i działa we wszystkich przeglądarkach. Na razie mam nadzieję, że powyższe informacje mogą pomóc niektórym programistom z podobnymi problemami.

Zaktualizowane, proste rozwiązanie

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

Stare rozwiązanie

Utwórz sekcję z każdą stroną i użyj poniższego kodu, aby dostosować marginesy, wysokość i szerokość.

Jeśli drukujesz w formacie A4.

Następnie użytkownik

Rozmiar: 8,27 cala i 11,69 cala

@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;
} 

następnie utwórz div z całą zawartością.

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

Osobiście sugerowałbym użycie innej jednostki miary niż px. Nie sądzę, aby piksele miały duże znaczenie w druku; idealnie byś użył:

• punkt (pt)
• centymetr (cm)

Jestem pewien, że są inne, a jeden doskonały artykuł o print-css można znaleźć tutaj: Going to Print , autorstwa Erica Meyera .

Polecam również pt w porównaniu z cm lub mm, ponieważ jest bardziej precyzyjny. Nie mogę również uruchomić @page w Chrome (wersja 30.0.1599.69 m). Ignoruje wszystko, co wstawiam na marginesy, duże lub małe. Ale możesz sprawić, by działał z marginesami treści w dokumencie, dziwne.

Jeśli znasz docelowy rozmiar papieru, możesz umieścić swoją treść w DIV o określonym rozmiarze i dodać margines do tego DIV, aby zasymulować margines wydruku. Niestety nie wydaje mi się, abyś miał dodatkową kontrolę nad funkcjami drukowania, poza pokazaniem tylko okna dialogowego drukowania.