无法消除 header 和 body 之间的差距

Question

我已经尝试了所有方法，从编辑 padding/margins 到将文件保存为 utf-8 格式（不带 BOM）在其他帖子中建议的记事本中，以消除他的差距。好像没什么用，所以我来寻求帮助。

我正在使用 python/django 框架开发此网页，其中我的 base.html 文件如下所示

{% load bootstrap3 %}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>Michael Goytia</title>

    {% bootstrap_css %}
    {% bootstrap_javascript %}

  </head>

  <body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Static navbar -->
    <nav class="navbar navbar-custom navbar-static-top">
    
      <div class="container">
     
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
             <!-- put three little bars in toggle button-->
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
            <b>Michael Goytia</b></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url 'personal_info:about_me'  %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
              <b>About Me</b></a>
            </li>
            <li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
              <b>Projects</b></a>
            </li>
            <li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
              <b>Contact Information</b></a>
            </li>
          </ul>
          
        </div><!--/.nav-collaspse -->
      </div>
    </nav> 

    <div class="container">

      <div class="page-header">
        {% block header %}{% endblock header %}
      </div>
      <div>
        {% block content %}{% endblock content %}
      </div>

    </div><!-- /container -->
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <style>
      .navbar-custom
      {
        background:#013737;
        border-radius:0;  
      }
    
      .navbar-toggle .icon-bar
      {
        background-color:#6C9F9F; 
      }
      .navbar-header .navbar-toggle
      {
        background-color:#0F5151;
      }
      footer{
        background:#013737;
        position:fixed;
        left:0px;
        bottom:0px;
        height:80px;
        width:100%;
      }
      body{
       background:#438383;
       padding: 0;
       margin: 0;
      }
      .nav > li >a:hover{
        background-color:#256A6A;
      }      

    </style>
  
  </body>

  <footer>

  </footer>
</html>

我认为问题出在我的 base.html 文件中，但这是使用 base.html

的另一个页面的示例 html

{% extends "personal_info/base.html" %}

{% block content %}
<h1><b><u>Projects</u></b><h1>

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Github Information</center></b>
        </h1>
      </div>
      <div class="panel-body">
        <div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
        <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
      </div>
    </div> <!--panel -->

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Academic</center></b>
        </h1>
      </div>
      <div class="panel-body">
        
      </div>
    </div> <!--panel -->

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Personal</center></b>
        </h1>
      </div>
      <div class="panel-body">
        
      </div>
    </div> <!--panel -->
  
  <style> 
     .panel-custom .panel-heading{
       background-color:#013737;
       color:#6C9F9F;
       border-radius: 50px 15px;
     }
     .panel-custom
     {
       background-color:#438383;
     }
     
       
     
     
  </style>
  
{% endblock content %}

我是 Web 开发的新手，所以我将不胜感激任何帮助。

Answer 1

好吧，在玩了一堆东西之后我意识到我的 header 周围有一个边框。所以为了摆脱它，我添加了行

.container .page-header { border-bottom: 0px:} 去掉了这个边框。

一开始不确定为什么会有边框。

如果有人过来，我希望这会有所帮助。

无法消除 header 和 body 之间的差距

can't get rid of gap between header and body

python

django

html

django-bootstrap3