爲什麼在我的css左邊有一個空白區域

我是一個新的css程序員，在我的代碼中存在一個非常惱人的問題。當我將灰色條插入屏幕左側時，他們觸摸右側但不是左側，我不知道爲什麼我的代碼中沒有任何內容阻止它們，所以我不知道爲什麼會這樣做，請幫助我解決它，謝謝！（中間的白色的大空間應該是有它的圖片。）爲什麼在我的css左邊有一個空白區域

<!doctype html> 
<html> 
<head> 
<title>AndrewDevs.Com</title> 

<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<link href="https://fonts.googleapis.com/css?family=Oswald"  rel="stylesheet"> 



<style type="text/css"> 




    #white{ 
     color:white; 


    } 


    .large { 
     font-size:300%; 
    } 

    #green { 
     color:black; 
    } 

    .underline { 
     text-decoration:underline; 
     } 

     .bold { 
      font-weight:bold; 
     } 

     .picture{ 
     position: absolute; 
     top: 45px; 
     right: 0; 
     width: 1870px; 
     height: 10px; 

     } 


     .greybox { 
     background-color:#a5a5a5; 
     position: absolute; 
     top: 380px; 
     right: 0; 
     width: 1870px; 
     height: 10px; 
     border: 3px solid #a5a5a5; 

     } 


     .connect { 
     background-color:#6b6b6b; 
     position: absolute; 
     top: 340px; 
     right: 0; 
     width: 1870px; 
     height: 40px; 
     border: 3px solid #6b6b6b; 

     } 


     .top { 
     top:10px; 
     width: 1870px; 
     height:700px; 
     z-index:2; 
     text-align: center; 




     } 

     .bottom { 
      background-color:#0a0a0a; 
      width: 1600px; 
      height:200px; 
      text-align: center; 


     } 

     .purplebox { 
      background-color:#6b6b6b; 
      position: absolute; 
      top: 0px; 
      right: 0; 
      width: 1870px; 
      height: 40px; 
      border: 3px solid #6b6b6b; 





      } 

     .greenbox { 
     top:0px; 
     width: 1870px; 
     height: 500px; 
     z-index:2; 
     text-align: center; 
     margin:150px 100px 30px 10px; 
     float:center; 
     font-family: 'Oswald', sans-serif; 


     } 


     } 

     p { 
      padding:0; 
      margin:0; 
     } 





</style> 
</head> 

<body> 


<div class="greybox"> 


</div> 


<div class="purplebox"> 

    <p class="large"></p> 

</div> 

<div class="picture"> 
<img src="code.jpg" alt="code" height="300" width="1870"> 
</div> 

<div class="connect"> 
<p> Connect with me! </p> 

</div> 

<div class="top"> 

    <p id="green" class="large">idfk</p> 

    </div> 



</div> 

<div class="greenbox"> 

    <p id="green" class="large">idfk</p> 

    </div> 

    <div class="greenbox"> 

    <p id="green" class="large">idfk</p> 

    </div> 

    <div class="bottom"> 

    <p id="white" class="large">Connect With me!</p> 

    </div>

來源

2016-06-14 AndrewDevs

很可能來自天然填充/保證金/ HTML標籤 – Huangism

添加'html，body {margin：0; }' – LGSon

默認情況下，身體在頁面上有這樣的CSS：

body { 
    display: block; 
    margin: 8px; 
} 
body:focus { 
    outline: none; 
}

在您的css文件的頂部只是添加：

body { 
    margin:0; 
}

這種方式你使用0邊界開始。

來源

2016-06-14 17:55:39

所以它的頂部看起來像這樣？

爲什麼在我的css左邊有一個空白區域

回答