div和屏幕頂部之間的空白

我遇到了div「name」和屏幕頂部之間的空白問題。我已經做了一些研究，所有我能找到的是我已經設置的margin和position: absolute;，它們與div的位置混在一起。這個差距並沒有提前出現，我也不知道我做了什麼來讓它出現。div和屏幕頂部之間的空白

這裏是我的代碼：

body { 
 
    background-image: url("./console.png"); 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.name { 
 
    font-size: 50px; 
 
    font-family: Brush Script MT; 
 
    text-align: center; 
 
    color: white; 
 
    background-color: black; 
 
}

<div class="name"> 
 
    <h1> Clovis Sargenton Callard </h1> 
 
</div>

來源

2017-10-10 Clément Colin

內'name'的'h1'可能有與之相關的一些餘量。嘗試將其設置爲0.例如'h1 {margin：0; }' –

這是造成collapsing margins

您h1刪除上邊距創造你想要的效果。

body { 
 
    background-image: url("./console.png"); 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.name { 
 
    font-size: 50px; 
 
    font-family: Brush Script MT; 
 
    text-align: center; 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
h1 { 
 
    margin-top: 0; 
 
}

<div class="name"> 
 
    <h1> Clovis Sargenton Callard </h1> 
 
</div>

來源

2017-10-10 15:22:10 sol

謝謝你的工作 –

您h1元素上設置margin: 0。

body { 
 
    background-image: url("./console.png"); 
 
    background-size: cover; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.name { 
 
    font-size: 50px; 
 
    font-family: Brush Script MT; 
 
    text-align: center; 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
h1 { 
 
    margin:0; 
 
}

<div class="name"> 
 
    <h1> Clovis Sargenton Callard </h1> 
 
</div>

來源

2017-10-10 15:21:41 jfeferman

div和屏幕頂部之間的空白

回答

相關問題