HTML CSS打印页面删除顶部和底部的空白

我试图打印一个HTML页面，但我很难消除页面顶部和底部的额外空白

以下是打印预览的外观（指向空间的箭头）：

还有我的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......

主标题
副标题
项目详情
等

---

我已经有一段时间没有创建打印页面了，但我相信这应该很简单。

您的代码看起来完全有效。我使用您的代码制作了JSFIDLE：

例如，如果您在代码中有示例：

body {
  margin: 200px;
}

当您尝试打印它时，它将被覆盖：

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

打印文件的正文边距为5px

---

确保没有任何其他样式，例如

！重要信息

覆盖您的打印样式

Hi@TrevorGoodchild！有趣的问题。您能否确认您的

媒体打印

样式是否正常工作？我一开始对

@

感到惊讶Hi kade，是的，他们正在工作。我在razor模板中执行此操作，因此我需要使用double@@s