Блог

У меня есть огромный текстовый блок на страницах, которые нужно распечатать, и я хочу добавить верхнее и нижнее поля, чтобы текст не был так близко к краю печатной страницы. Поскольку эти текстовые блоки не могут быть разбиты на теги, потому что они агрегируются с помощью сканера rss-каналов, я попытался использовать @page в css, но пока безуспешно. Я использую Chrome и предварительный просмотр принтера. Я использую WordPress, если это имеет значение.

Вот изображение того, как это выглядит в формате PDF. Печатный текстовый блок

Я попытался поместить его в @media screen или @media print , добавив !important , и я уже час ищу в Интернете…

Я добавил этот CSS (и попробовал другие варианты) в свой файл CSS, но он не применяется. Все остальные стили печати @media работают.

 @page { 
  margin-top: 2cm;
  }
 

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

Адресация печатных элементов обычно выполняется с помощью @media print , как вы уже писали. Но, кроме того, вам нужен селектор внутри этого медиа-запроса. Так что , если эти текстовые блоки имеют , например, класс .my_class , CSS будет

 @media print {
  .my_class {
    margin-top: 2cm;
  }
}
 

Если текстовые блоки не имеют никакого класса, рассмотрите возможность применения к ним класса в HTML или в скрипте, который их генерирует.

Добавление после комментария:

Вы пытались совместить @media print и @page ? Вот так (я обычно использую его таким образом, и это работает для меня):

 @media print {
    @page  { 
        margin-top: 2cm;
    }
}