Question

因此，我最近开始研究Django框架，但是即使每个视图的layout.html和layout.css相同，它也会在视图顶部添加一些空白。

layout.html

<html>
<head>
    <meta charset="utf-8" />
    {% load staticfiles %} 
    <link rel="stylesheet" type="text/css" href="{% static 'layout.css' %}" />
    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' />
</head>

<body>
    <div class="content">
        <div class="navbar">
            <a href="/" class="navbar-brand">Homepage.</a>
            <a href="{% url 'home:index' %}" class="navbar-item">Home</a>
            <a href="{% url 'projects:index' %}" class="navbar-item">Projects</a>
            <a href="{% url 'home:about' %}" class="navbar-item">About</a>
        </div>

        <div class="text">
        {% block stuff %} 
        {% endblock %}
        </div>
    </div>
</body>
</html>

这是我的观点

def index(request):
return render(
    request,
    'home/index.html',
    {
        'greetings': "Welcome to my site!",
    }
)

def about(request): 
return render(
    request,
    'home/about.html',
    {
        'greetings': "Welcome to my site!",
    }
)

home / index.html和home / about.html都像

{% extends "layout.html" %}
{% block stuff %}
{{ greetings }}
{% endblock %}

about page pushed down

如该图所示，about.html页面的视图被下推，我真的不知道为什么。

在检查了元素之后，我发现对于about页面，页眉已添加到body标签。

inspecting the elements

有人可以帮助我吗？

Answer 1

这很可能是因为 CSS 。要找出空间的来源，请点击检查元素，然后选择选择要检查的元素。然后在页面上稍微移动鼠标，直到找到该空间并单击。然后，您可以在“样式”标签中找出空间的出处。

还要确保您的html模板中没有<br>标记

Answer 2

这里的视图当然不是罪魁祸首，它只是一个python函数，它接收请求并返回响应。 HTML看起来也不错，请再次检查您的 CSS （或在此处发布），或者您始终可以通过开发者检查浏览器中的源代码并检查元素检查空白来自哪里的工具。

Django将空白添加到视图

2 个答案: