Html css печать страницы с удалением пробелов сверху и снизу

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

Вот как выглядит предварительный просмотр печати (стрелки указывают на пробел):

enter image description here

и мой CSS:

@@media print {
        body {
            margin: 5px;
        }

        .body.menubar-top {
            padding-top: 0px;
        }

        .no-print {
            display: none;
        }

        #section-to-print, #section-to-print * {
            visibility: visible;
            margin-top: 0px;
            padding-top: 0px;
        }

        #section-to-print {
            /*position: absolute;*/
            /*left: 0;
            top: 0;*/
        }
    }

и код страницы:

    <div class="row" id="section-to-print" style="vertical-align:top">

    <div class="col-md" id="projectDetails">

        <div class="col-md-12">
            <h3 class="headerTitle">
                Main Title
            </h3>
        </div>

        <div class="col-md-12">
            <h4 class="headerTitle">
                Sub title
            </h4>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h5>
                    Project Details
                </h5>
            </div>
        </div>

etc......

Я давно не создавал страницу для печати, но уверен, что это должно быть просто.

Привет, @TrevorGoodchild! Интересный вопрос. Не могли бы вы подтвердить, что ваши стили media print работают правильно? Я удивлен @@ в начале

kademat 13.09.2018 20:58

Привет, Кейд, да, они работают. Я делаю это в шаблоне бритвы, поэтому мне нужно использовать двойной @@ s

TrevorGoodchild 13.09.2018 20:59
3
2
2 652
1

Ответы 1

Ваш код выглядит полностью действующим. Я сделал JSFiddle с вашим кодом:

https://jsfiddle.net/a6fu1vcg/2/

Например, если у вас есть, например, код:

body {
  margin: 200px;
}

Когда вы попытаетесь распечатать его, он будет отменен:

@media print {
        body {
            margin: 5px;
        }
}

У печатаемого документа поле основного текста будет 5 пикселей.

Убедитесь, что у вас нет других стилей, например, с !important, которые переопределяют ваши стили печати.

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