Wie legt man Ränder zum Drucken einer HTML-Seite fest?

So legen Sie Ränder beim Drucken einer HTML-Seite fest

Wenn Sie zum Drucken ein separates Stylesheet verwenden, ist es wichtig, die Ränder anzupassen optimale Präsentation auf Papier. Es ist jedoch nicht immer klar, wie die Ränder im Stylesheet richtig eingestellt werden. Um konsistente Ränder zu gewährleisten, ist es wichtig, bei der Druckangabe absolute Einheiten wie Zentimeter (cm) oder Millimeter (mm) zu verwenden.

Um beispielsweise einen Rand von 25 mm auf allen Seiten des Dokuments festzulegen:

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

Beachten Sie, dass die Verwendung von Pixeln für Ränder zu Inkonsistenzen führen kann, da Browser sie in bildschirmbasierte Werte übersetzen.

Für Für Schriftgrößen verwenden Sie in den Druckmedien Punkte (pt).

Es ist wichtig zu beachten, dass das Festlegen von Rändern am Körperelement im CSS-Stil keinen Einfluss auf die vom Druckertreiber oder Browser gesteuerten Ränder hat. Es passt den Rand des Dokuments innerhalb des druckbaren Bereichs an.

Um eine vollständige Kontrolle über die gedruckten Ränder zu erhalten, verwenden Sie die @page-Direktive, um den Papierrand festzulegen. Dies wirkt sich auf den Rand außerhalb des HTML-Body-Elements aus und wird normalerweise vom Browser gesteuert.

Hier ist ein Beispiel für die Verwendung der @page-Direktive:

@page {
    size: auto;
    margin: 25mm 25mm 25mm 25mm;
}

body {
    margin: 0px;
}

Diese Technik funktioniert in allen gängigen Browsern außer Safari . Im Internet Explorer können Benutzer die Ränder in den Druckvorschaueinstellungen anpassen.

Beachten Sie außerdem, dass IE7 die Druckgröße automatisch an die Seite anpasst, was zu Störungen der konfigurierten Ränder führen kann. Benutzer müssen die Druckgröße in der Druckvorschau auf 100 % einstellen, um dieses Verhalten zu überschreiben.

Das obige ist der detaillierte Inhalt vonWie legt man Ränder zum Drucken einer HTML-Seite fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!