なぜ私の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の左側に空白がありますか

答えて