Печать HTML размера A4 в Chrome - неправильная высота

Я хотел бы напечатать HTML в Chrome. Это формат А4 (210×297 мм). В приведенном ниже коде я установил размер бумаги 210×297 и поля (отступы) 20 мм. Чтобы представить минимальный воспроизводимый пример, я размещаю на странице один абзац:

<html>

<head>
<style>
    @page {
        size:       A4 portrait;
    }
    
    body {
        position:   fixed;
        top:        0mm;
        left:       0mm;
        width:      210mm;
        height:     297mm;
        margin:     0mm 0mm 0mm 0mm;
        padding:    20mm 20mm 20mm 20mm;
        border:     solid green 1px;
        outline:    solid yellow 1px;
    }

    p {
        position: static;
        width:              170mm;  /* = 210 - 20 - 20 */
        height:             257mm;  /* = 297 - 20 - 20 */
        margin:             0mm;
        padding:            0mm;
        border:             solid red 1px;
        outline:            solid blue 1px;
        background-color:   #ddffdd;
    }
</style>
</head>

<body class = "A4">

    <p>Hello!</p>

</body>

</html>

Я ожидаю, что это заполнит всю страницу. Однако Chrome показывает следующий предварительный просмотр печати:

Я думаю, что желто-зеленая граница должна быть вверху страницы, а не на несколько миллиметров ниже.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
954
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы пробовали установить поля в настройках печати? Я вижу, что вы установили его на минимум, что препятствует желаемому отступу в 20 мм.

Спасибо, это было.

z32a7ul 25.12.2020 21:44

Другие вопросы по теме