2017-02-23 91 views
0

我已經嘗試了一切從編輯填充/邊距到保存文件爲utf-8沒有BOM在其他帖子中建議的記事本,以讓他的差距消失。似乎沒有什麼工作,所以我來尋求幫助。無法擺脫標題和正文之間的差距

enter image description here

我使用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>

我認爲,問題存在於我的基地開發這個網頁.html文件,但是這裏是另一個頁面的示例html,使用base.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 %}

我是新來的網絡發展,使任何幫助,我將非常感激。

+0

你嘗試過使用某種正常化嗎?這是覆蓋所有的默認值。例如,您可以使用 * {margin:0;填充:0}。試試這個,可能會幫助你。 –

+0

我試着在'.nav> li> a:hover {hover}背景顏色:#256A6A;}下面加'* {margin:0; padding:0;}',它什麼也沒做。 –

+0

更新,加入'.container .page-header { color:#013737; font-family:Arial,Helvetica,sans-serif; font-size:400%; 填充:0; margin:0; }'到base.html我可以移動標題,但然後白線觸摸身體的邊緣,但仍然沒有消失 –

回答

0

好了之後玩了一堆東西后,我意識到不知何故,我有一個邊界在我的標題。所以爲了擺脫它,我添加了行

.container .page-header { border-bottom: 0px:}然後擺脫這個邊界。

不知道爲什麼邊界是在那裏擺在首位。

如果有人來,我希望這有助於。