2016-09-21 43 views
2

的頂部之間的空間/空隙我在我的H1標籤會從我的頁面的頂部分隔的一個問題 - 這樣的:enter image description hereH1使得頭部和

我還是很新的HTML CSS &,所以我在尋求你的幫助。此外,我DID環顧四周看到其他職位關於這一點,我已經嘗試了很多,但我似乎無法得到它的工作。

這裏是我的CSS & HTML:

html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.header{ 
 
    background: url("../images/artboard1.jpg") no-repeat top center fixed; 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#logo { 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    font-size: 1rem; 
 
    float: left; 
 
    padding-left: 40px; 
 
    padding-top: 35px; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    float: right; 
 
    padding-top: 40px; 
 
    padding-right: 40px; 
 
    margin: 0; 
 
} 
 
    a { 
 
    color: #ffffff; 
 
    font-weight: 400; 
 
    font-size: 80%; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    padding-left: 3rem; 
 
} 
 

 
.content_top { 
 
    margin: 0; 
 
    margin-top: 260px; 
 
    padding: 4rem 0 8rem 0; } 
 
    .sub_title, .under_title { 
 
    color: #ffffff; 
 
    text-align: center; 
 
    } 
 

 
    .sub_title { 
 
    font-weight: 400; 
 
    font-size: 0.85rem; 
 
    padding: 0 0 5px 0; 
 
    margin: 0; 
 
    } 
 

 
    .logo_middle { 
 
    display: block; 
 
    margin: 0 auto; 
 
    } 
 

 
    .under_title { 
 
    font-weight: 400; 
 
    font-size: 0.85rem; 
 
    padding: 5px 0 5px 0; 
 
    margin: 0; 
 
    } 
 

 
.content { 
 
    background: url(../images/Untitled-2.png); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-color: #0D0E12; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.projekter { 
 
    background-color: #0D0E12; 
 
    margin: 0 auto; 
 
    padding 0 auto; 
 
}
<html> 
 
    <head> 
 
    <title>Jakob Hoeg</title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> 
 
    </head> 
 

 
    <body> 
 

 
    <div class="header"> 
 
     <header> 
 
     <a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/> 
 
     <nav> 
 
      <a href="#">HJEM</a> 
 
      <a href="#">PORTFOLIO</a> 
 
      <a href="#">KONTAKT</a> 
 
     </nav> 
 

 
     <div class="content_top"> 
 
      <h4 class="sub_title">HEY, MIT NAVN ER</h4> 
 
      <img class="logo_middle" src="images/logo_big.png" draggable="false"/> 
 
      <h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4> 
 
     </div> 
 
     </header> 
 

 
    </div> 
 

 
    <section class="content"> 
 
     <div id="content_cont"> 
 
     <h1>Hello</h1> 
 
     </div> 
 
    </section> 
 

 
    <section class="projekter"> 
 
     <div id="projekter"> 
 
     <h1>Hello</h1> 
 
     </div> 
 
    </section> 
 

 
    </body> 
 
</html>

+1

我認爲你需要考慮重置CSS。 – frenchie

回答

4

嘿,這是一個非常有趣的效果 - 「邊緣崩潰」。 h1有默認margin-top

家長和第一/最後一個子

如果沒有邊框,填充,內嵌的內容,或間隙 從它的第一 的邊距分離塊的上邊距子塊或無邊框,填充,內聯內容,高度,最小高度或最大高度以將塊 的頁邊距底部與其最後一個孩子的頁邊空白分開,然後這些頁邊空白摺疊。 摺疊的邊距最終在父級之外。

爲了解決這個問題添加padding-top到容器或替換報頭margin-toppadding-top用。也可以將h1margin-top設置爲0.

您可以閱讀更多關於它here

+0

謝謝!這幾乎解決了這個問題。但是,我查看了一個reset.css文件,並且使用一個帶有0的餘量的h1創建了一個,這對問題進行了排序! – Jakob

+0

好的。你的問題提醒我幾年前,我尋找這個問題的解決方案=) – 3rdthemagical

+0

哈哈,是的。那麼,我所能做的只是練習,對吧? :-) – Jakob

4

您可以加入這種風格。它會起作用。

#content_cont h1 { margin-top:0; } 
+0

這個工程!但爲什麼我不能只用0的餘量頂部來製作h1?爲什麼doens似乎不工作,爲什麼我必須寫#content_cont?謝謝您的幫助! – Jakob

+0

通常,在不重置CSS的情況下,瀏覽器的默認間距約爲10px。所以我們需要重置HTML標籤。 http://meyerweb.com/eric/tools/css/reset/ – Nehemiah

0

儘量不要爲每個對象設置寬度和高度。正如其他答案所說,你可以在CSS中使用margin來移動對象。但我擔心的是,爲html,正文,內容等添加不必要的樣式,例如寬度和高度100%......爲您的設計帶來一些衝突。

+0

好的。對於HTML和Body,我正在看一個教程,他也這樣做 - 但我會亂七八糟,看看我能做些什麼。感謝您的評論。 – Jakob