Margin saat mencetak halaman html

Saya menggunakan lembar gaya terpisah untuk pencetakan. Apakah mungkin untuk mengatur margin kanan dan kiri dalam style-sheet yang mengatur margin cetak (yaitu margin di atas kertas).

Terima kasih.

Anda harus menggunakan cmatau mmsebagai unit saat Anda menentukan untuk pencetakan. Menggunakan piksel akan menyebabkan browser menerjemahkannya menjadi sesuatu yang mirip dengan tampilannya di layar. Menggunakan cmatau mmakan memastikan ukuran kertas yang konsisten.

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

Untuk ukuran font, gunakan ptuntuk media cetak.

Perhatikan bahwa mengatur margin pada bodi dalam gaya css tidak akan menyesuaikan margin di driver printer yang menentukan area cetak printer, atau margin dikontrol oleh browser (dapat disesuaikan dalam pratinjau cetak di beberapa browser) ... hanya akan mengatur margin pada dokumen di dalam area yang dapat dicetak.

Anda juga harus menyadari bahwa IE7 ++ secara otomatis menyesuaikan ukuran agar paling sesuai, dan menyebabkan semuanya menjadi salah meskipun Anda menggunakan cmatau mm. Untuk mengesampingkan perilaku ini, pengguna harus memilih 'Pratinjau cetak' dan kemudian mengatur ukuran cetak ke 100%(standarnya Shrink To Fit).

Pilihan yang lebih baik untuk kontrol penuh pada margin yang dicetak adalah dengan menggunakan @pagepetunjuk untuk mengatur margin kertas, yang akan mempengaruhi margin pada kertas di luar elemen badan html, yang biasanya dikontrol oleh browser. Lihat http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Ini saat ini berfungsi di semua browser utama kecuali Safari.
Di Internet explorer, margin sebenarnya disetel ke nilai ini dalam pengaturan untuk pencetakan ini, dan jika Anda melakukan Pratinjau, Anda akan mendapatkan ini sebagai default, tetapi pengguna dapat mengubahnya di pratinjau.

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

Jawaban terkait: Menonaktifkan opsi cetak browser (header, footer, margin) dari halaman?

Pertama-tama, saya mencoba memaksa semua pengguna saya untuk menggunakan Chrome saat mencetak karena browser lain membuat tata letak yang berbeda.

Jawaban dari pertanyaan ini merekomendasikan:

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

Namun, saya akhirnya menggunakan CSS ini untuk semua halaman saya yang akan dicetak:

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

Kasus khusus: Meja Panjang

Ketika saya perlu mencetak tabel di beberapa halaman, margin:0dengan @pageitu mengarah ke tepi yang berdarah:

Saya bisa menyelesaikan ini berkat jawaban ini dengan:

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

Ditambah pengaturan margin atas-bawah untuk @page:

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

Hasil:

Saya lebih suka solusi yang ringkas dan berfungsi dengan semua browser. Untuk saat ini, semoga informasi di atas dapat membantu beberapa developer yang mengalami masalah serupa.

Diperbarui, Solusi Sederhana

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

Solusi Lama

Buat bagian dengan setiap halaman, dan gunakan kode di bawah ini untuk menyesuaikan margin, tinggi dan lebar.

Jika Anda mencetak ukuran A4.

Kemudian pengguna

Ukuran: 8,27 inci dan 11,69 inci

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

lalu buat div dengan semua konten Anda di dalamnya.

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

Saya pribadi menyarankan untuk menggunakan unit pengukuran yang berbeda dari px. Saya tidak berpikir bahwa piksel memiliki banyak relevansi dalam hal cetak; idealnya Anda akan menggunakan:

• poin (pt)
• sentimeter (cm)

Saya yakin ada yang lain, dan satu artikel bagus tentang print-css dapat ditemukan di sini: Going to Print , oleh Eric Meyer .

Saya juga merekomendasikan pt versus cm atau mm karena lebih tepat. Juga, saya tidak bisa membuat @page berfungsi di Chrome (versi 30.0.1599.69 m) Ini mengabaikan apa pun yang saya taruh untuk margin, besar atau kecil. Tapi, Anda bisa membuatnya bekerja dengan margin tubuh pada dokumen, aneh.

Jika Anda mengetahui ukuran kertas target, Anda dapat menempatkan konten Anda dalam DIV dengan ukuran spesifik tersebut dan menambahkan margin ke DIV tersebut untuk mensimulasikan margin cetak. Sayangnya, saya tidak yakin Anda memiliki kontrol ekstra atas fungsionalitas cetak selain hanya menampilkan kotak dialog cetak.