没有extend bootstrap/base.html 顶部有一处空白

jinja2

#1

最开始的 base.html 是第一个,发现在顶部有一个宽度约 0.5cm的空白且无法定位到后,按照 bootstrap/base.html 的样式重写了一份,就没有空白了。

但是对于这2个html,观察了浏览器最终渲染的html页面,并没有发现代码上存在差异,所以不知道为什么会有这样的一处空白,请了解的人指教。

有空白的 base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- ===== Mobile viewport optimized ===== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

    <!-- ===== Meta Tags - Description for Search Engine purposes ===== -->
    <meta name="description" content="Movify - Movies, Series & Cinema HTML Template">
    <meta name="keywords" content="movies, series, online streaming, html template, cinema html template">
    <meta name="author" content="GnoDesign">

    <!-- ===== Website Title ===== -->
    <title>{% block title %}{{ title|default }}{% endblock title %}</title>

    <!-- ===== Favicon & Different size apple touch icons ===== -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone.png') }}">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad.png') }}">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-retina.png') }}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-retina.png') }}">
    <link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-pro.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-6-plus.png') }}">
    <link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/images/icon-hd.png') }}">
    <link rel="icon" sizes="128x128" href="{{ url_for('static', filename='assets/images/icon.png') }}">

    <!-- ===== Google Fonts ===== -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

    {% block css %} <!--css模块区域-->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/bootstrap.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/settings.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/layers.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/navigation.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/magnific-popup.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/jquery.mmenu.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/owl.carousel.min.css') }}">

        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/style.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/responsive.css') }}">
    {% endblock %}

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<!-- =============== START OF PRELOADER =============== -->
<div class="loading">
    <div class="loading-inner">
        <div class="loading-effect">
            <div class="object"></div>
        </div>
    </div>
</div>
<!-- ================= END OF PRELOADER =============== -->


<!-- =============== START OF RESPONSIVE - MAIN NAV =============== -->
<nav id="main-mobile-nav"></nav>
<!-- ================= END OF RESPONSIVE - MAIN NAV =============== -->

<!-- =============== START OF WRAPPER =============== -->
<div class="wrapper">

    <!--引入网页的底部模板-->
    {% include "header.html" %}



    {% for message in get_flashed_messages() %}
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}</div>
    {% endfor %}


    {% block content %}
        {% block page_content %}{% endblock %}
    {% endblock %}

    <!--引入网页的底部模板-->
    {% include "footer.html" %}

</div>
<!-- =============== END OF WRAPPER =============== -->


<!-- =============== START OF GENERAL SEARCH WRAPPER =============== -->
<div class="general-search-wrapper">
    <form class="general-search" role="search" method="get" action="#">
        <input type="text" placeholder="Type and hit enter...">
        <span id="general-search-close" class="ti-close toggle-search"></span>
    </form>
</div>
<!-- =============== END OF GENERAL SEARCH WRAPPER =============== -->

<!-- ===== Start of Back to Top Button ===== -->
<div id="backtotop">
    <a href="#"></a>
</div>
<!-- ===== End of Back to Top Button ===== -->

{% block js %}<!--js模块区域-->
    <!-- ===== All Javascript at the bottom of the page for faster page loading ===== -->
    <script src="{{ url_for('static', filename='assets/js/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.ajaxchimp.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.mmenu.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.inview.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.countTo.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/jquery.countdown.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/owl.carousel.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/imagesloaded.pkgd.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/isotope.pkgd.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/headroom.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>

    <!-- ===== Slider Revolution core JavaScript files ===== -->
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.tools.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.revolution.min.js') }}"></script>

    <!-- ===== Slider Revolution extension scripts ===== -->
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.actions.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.carousel.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.kenburn.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.layeranimation.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.migration.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.navigation.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.parallax.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.slideanims.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.video.min.js') }}"></script>
{% endblock %}
</body>
</html>

没有空白的 html

{% block doc -%}
    <!DOCTYPE html>
    <html{% block html_attribs %}{% endblock html_attribs %}>
    {%- block html %}
        <head>
            {%- block head %}
                <title>{% block title %}{{ title|default }}{% endblock title %}</title>

                {%- block metas %}
                    <meta charset="UTF-8">

                    <!-- ===== Mobile viewport optimized ===== -->
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

                    <!-- ===== Meta Tags - Description for Search Engine purposes ===== -->
                    <meta name="description" content="Movify - Movies, Series & Cinema HTML Template">
                    <meta name="keywords" content="movies, series, online streaming, html template, cinema html template">
                    <meta name="author" content="GnoDesign">
                {%- endblock metas %}

                <!-- ===== Favicon & Different size apple touch icons ===== -->
                <link rel="shortcut icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}" type="image/x-icon">
                <link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone.png') }}">
                <link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad.png') }}">
                <link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-retina.png') }}">
                <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-retina.png') }}">
                <link rel="apple-touch-icon" sizes="167x167" href="{{ url_for('static', filename='assets/images/apple-touch-icon-ipad-pro.png') }}">
                <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='assets/images/apple-touch-icon-iphone-6-plus.png') }}">
                <link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/images/icon-hd.png') }}">
                <link rel="icon" sizes="128x128" href="{{ url_for('static', filename='assets/images/icon.png') }}">

                {%- block styles %}
                    <!-- ===== Google Fonts ===== -->
                    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/bootstrap.min.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/settings.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/layers.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/revolution/css/navigation.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/magnific-popup.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/jquery.mmenu.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/owl.carousel.min.css') }}">

                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/style.css') }}">
                    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/responsive.css') }}">

                    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                    <!--[if lt IE 9]>
                    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                    <![endif]-->
                {%- endblock styles %}
            {%- endblock head %}
        </head>
        <body{% block body_attribs %}{% endblock body_attribs %}>
        {% block body -%}

            <!-- =============== START OF PRELOADER =============== -->
            <div class="loading">
                <div class="loading-inner">
                    <div class="loading-effect">
                        <div class="object"></div>
                    </div>
                </div>
            </div>
            <!-- ================= END OF PRELOADER =============== -->


            <!-- =============== START OF RESPONSIVE - MAIN NAV =============== -->
            <nav id="main-mobile-nav"></nav>
            <!-- ================= END OF RESPONSIVE - MAIN NAV =============== -->

            <!-- =============== START OF WRAPPER =============== -->
            <div class="wrapper">

                <!--引入网页的底部模板-->
                {% include "header.html" %}

                {% for message in get_flashed_messages() %}
                    <div class="alert alert-warning">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {{ message }}</div>
                {% endfor %}


                {% block content %}
                    {% block page_content %}{% endblock %}
                {% endblock %}

                <!--引入网页的底部模板-->
                {% include "footer.html" %}

            </div>
            <!-- =============== END OF WRAPPER =============== -->

            <!-- =============== START OF GENERAL SEARCH WRAPPER =============== -->
            <div class="general-search-wrapper">
                <form class="general-search" role="search" method="get" action="#">
                    <input type="text" placeholder="Type and hit enter...">
                    <span id="general-search-close" class="ti-close toggle-search"></span>
                </form>
            </div>
            <!-- =============== END OF GENERAL SEARCH WRAPPER =============== -->

            <!-- ===== Start of Back to Top Button ===== -->
            <div id="backtotop">
                <a href="#"></a>
            </div>
            <!-- ===== End of Back to Top Button ===== -->

            {% block scripts %}
                <!-- ===== All Javascript at the bottom of the page for faster page loading ===== -->
                <script src="{{ url_for('static', filename='assets/js/jquery-3.2.1.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/bootstrap.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.ajaxchimp.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.magnific-popup.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.mmenu.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.inview.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.countTo.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/jquery.countdown.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/owl.carousel.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/imagesloaded.pkgd.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/isotope.pkgd.min.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/headroom.js') }}"></script>
                <script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>

                <!-- ===== Slider Revolution core JavaScript files ===== -->
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.tools.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/jquery.themepunch.revolution.min.js') }}"></script>

                <!-- ===== Slider Revolution extension scripts ===== -->
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.actions.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.carousel.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.kenburn.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.layeranimation.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.migration.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.navigation.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.parallax.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.slideanims.min.js') }}"></script>
                <script type="text/javascript" src="{{ url_for('static', filename='assets/revolution/js/extensions/revolution.extension.video.min.js') }}"></script>
            {%- endblock scripts %}
        {%- endblock body %}
        </body>
    {%- endblock html %}
    </html>
{% endblock doc -%}