More space is coming between Header and Page1 but from page2 it is correct

Question

I tried creating a QWEB report with custom Paper Format but more space is coming between Header and Page1 but from page2 it is correct.I tried adjusting Margin Top and Header Spacing. Thanks in Advance

Page Format

<record id="paper_xn_so_preprint" model="report.paperformat">
    <field name="name">Sale Order PrePrint</field>
    <field name="default" eval="True"/>
    <field name="format">custom</field> 
    <field name="page_height">148</field>
    <field name="page_width">210</field>
    <field name="orientation">Portrait</field>
    <field name="margin_top">50</field>
    <field name="margin_bottom">14</field>
    <field name="margin_left">0</field>
    <field name="margin_right">0</field>
    <field name="header_line" eval="False"/>
    <field name="header_spacing">20</field>
    <field name="dpi">90</field>
</record>

Template Sample

<template id="xn_saleorder_preprint">
    <!-- <t t-call="report.html_container"> -->
    <t t-foreach="docs" t-as="o">
        <div class="header">
            <div class="row col-xs-12">
                <div class="col-xs-4">
                    Customer
                    ID
                    Mobile
                </div>
                <div class="col-xs-4">
                    Sale Order
                </div>
                <div class="col-xs-4 pull-right">
                    Order Date
                    Delivery Date
                    SO Number
                </div>
            </div>
        </div>
        <div class="page">
            Page Contents
        </div>
    </t>
</template>

EDIT

I think the problem is caused by the table.But was not able to figure where the problem is.

CODE

<div class="page">
    <table width="100%">
        <thead>
            <th>Sl No.</th>
            <th>Customer</th>
            <th>Product</th>
            <th>Quantity</th>
            <th">Unit Price</th>
            <th>Taxes</th>
            <th>Discount</th>
            <th>Subtotal</th>
        </thead>
        <tbody>
            <t t-set="sl_no" t-value="0"/>
            <tr t-foreach="o.order_line" t-as="line">
                <t t-set="sl_no" t-value="sl_no+1"/>
                <td><span t-esc="sl_no"/></td><br/>
                <td><span t-field="line.xn_order_customer_name"/></td>
                <td><span t-field="line.product_id.name"/></td>
                <td class="text-right">
                    <t t-if = "float(line.product_uom_qty.is_integer())">
                        <span t-esc = "int(line.product_uom_qty)" />
                    </t>
                    <t t-if = "not float(line.product_uom_qty.is_integer())" >
                        <span t-field = "line.product_uom_qty" />
                    </t>
                </td>
                <td class="text-right"><span t-field="line.price_unit"/></td>
                <td class="text-right">
                    <t t-set="vat_amount" t-value="0"/>
                    <t t-foreach="line.tax_id" t-as="x">
                        <t t-set="vat_amount" t-value="vat_amount+(line.price_subtotal*x.amount/100)"/>
                    </t>
                    <span t-esc="vat_amount" t-options="{'widget': 'float', 'precision': 2}"/>
                </td>
                <td class="text-right"><span t-field="line.xn_discount_amt" t-options="{'widget': 'float', 'precision': 2}"/></td>
                <td class="text-right"><span t-field="line.price_subtotal"/></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

You may try with following:

<field name="margin_top">10</field>

EDIT:

You may try web.html_container and web.external_layout template.

<template id="template_xn_saleorder_preprint">
    <t t-call="web.external_layout">
        <div class="header">
            <div class="row col-xs-12">
                <div class="col-xs-4">
                    Customer
                    ID
                    Mobile
                </div>
                <div class="col-xs-4">
                    Sale Order
                </div>
                <div class="col-xs-4 pull-right">
                    Order Date
                    Delivery Date
                    SO Number
                </div>
            </div>
        </div>
        <div class="page">
            Page Contents
        </div>
    </t>
</template>


<template id="xn_saleorder_preprint">
    <t t-call="web.html_container">
        <t t-foreach="docs" t-as="o">
            <t t-call="template_xn_saleorder_preprint"/>
        </t>
    </t>
</template>

EDIT:

It is because of this code: <td><span t-esc="sl_no"/></td><br/>