Маржа увеличивается в режиме печати

Question

Я работаю над представлением печати для своего проекта, но когда я изменяю размер бумаги, иногда поля в контейнере по некоторым причинам увеличиваются, и это увеличивает высоту моего контейнера. Есть ли способ исправить это?

<div class="field-padding">
    <div class="label">{{label}}</div>
    <div class="text-field">{{value}}</div>
</div>

Вот файл CSS:

@media print {
  .field-padding {
    margin-bottom: 10px;
  }

  .label {
    margin-bottom: 5px;
  }
}

Изображение для справки:

РЕДАКТИРОВАТЬ: Дополнительная ссылка. Как вы можете видеть здесь, одни и те же компоненты внутри раздела, также на той же странице, но другой почему-то расширен. (Просмотр печати)

Section1

Section2

Заранее спасибо.

Answer 1

Я думаю, это должно быть см или мм как единица, когда вы указываете для печати. Ты можешь попробовать вот так?

@media print {
    .field-padding {
      margin-bottom: 10mm;
    }

    .label {
      margin-bottom: 5mm;
    }
  }

Answer 2

В режиме печати лучше использовать cm или pt, см. this

@media print {
  .field-padding {
    margin-bottom: 11pt;
  }

  .label {
    margin-bottom: 6cm;
  }
}