div適合頁面頂部

我正在嘗試創建適合頁面頂部並填充寬度的div元素。我已經填滿了寬度，但是我無法使它適合頁面的頂部，div上方有一個小間隙。div適合頁面頂部

我已經設置身體有0邊距和0填充，所以什麼是在頂部創建〜20px的差距。

我的HTML如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Photography</title>  
    <style> 
     p { 
      padding-top: 20px; 
      padding-right: 20px; 
      padding-bottom: 20px; 
      padding-left: 20px; 
     }  
    </style> 
</head> 
<body bgcolor="#bbbbbb" style="margin:0;padding:0"> 

    <div style="background-color:#999999;margin:0;padding:0"> 
     <h1 style="color:#ffffff" >Photographs</h1> 
    </div> 

    <div> 
     <p align="center" ><img src="IMG_2574.png" alt="Campground" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_2593.png" alt="Lake Sunset" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_2702.png" alt="Hudson River" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3129.png" alt="Central Park" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3229.png" alt="The Met" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3384.png" alt="Break Dancer" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3486.png" alt="Brooklyn Bridge" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3656 2.png" alt="Rockefeller Center" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3809 2.png" alt="Times Square" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_3824 2.png" alt="Top of the Rock" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_7620.png" alt="Lake Louise" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_7907.png" alt="Mt Hood" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_7950.png" alt="Multnomah Falls" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_8193.png" alt="Cape Kiwanda" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_8254.png" alt="Yaquina Head Lighthouse" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_8377.png" alt="Cape Perpetua" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_8441.png" alt="Simpson Reef" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_9711.png" alt="Nevada" style="width:;height:;"></p> 
     <p align="center"><img src="IMG_9730.png" alt="Salt Flats" style="width:;height:;"></p> 
    </div> 
</body> 
</html>

來源

2017-10-07 ScottF

只需補充一點：

h1 { 
    margin-top: 0; /* It will fix the top margin */ 
}

標題都有默認的頂部和底部邊緣。在Chrome中，默認保證金爲0.67em，這將給您約20px。

h1 { 
    -webkit-margin-before: 0.67em; 
}

這就是爲什麼我們需要將它設置爲零。

來源

2017-10-07 20:16:47

謝謝。當我將div位置固定時，頂部空間再次出現。爲什麼是這樣？ – ScottF

@ScottF請選擇此項：https://jsfiddle.net/1rLkvsv1/5/ –

此外，請儘量避免網絡上文件名稱中的空格。有時可以，有時不可以。一般來說，'IMG_3824_2.png'比''IMG_3824 2.png'好 –

您可以使用*刪除瀏覽器添加的任何邊距或填充，然後可以爲您的元素提供任何自定義填充或邊距。

使用這個在你的CSS的頂部：

*{ 
    margin:0; 
    padding:0 
}

來源

2017-10-07 20:20:18

div{background-color:#999999;margin:0;padding:0} 
 
h1{margin-top:-8px;color:#ffffff;}

<div \> 
 
    <h1 >S.Field Photographs</h1> 
 
</div>

來源

2017-10-07 20:20:31

包括下面的代碼

<head> 
.... 
<style> 
#your_div_id { 
      height: 100%; 
     } 
</style> 
.... 
</head>

來源

2017-10-07 20:24:59

div適合頁面頂部

回答

相關問題