ページの端にあるギャップを取り除くにはどうすればよいですか？

ボディと2つのdivのボーダー、パディング、マージンをすでに0pxに設定しました。しかし、私はまだギャップを取り除くように見えることはできません。ページの端にあるギャップを取り除くにはどうすればよいですか？

#body{ 
padding: 0px ; 
border:0px ; 
margin:0px; 
width:100%; 
height:100vh; 
} 


#mainPage { 
height:100vh; 
width:100%; 
background-color: #2469ff; 
padding: 0px; 
border:0px; 
margin:0px; 
} 

#navBar{ 

height:70px; 
width:100%; 
Background-color: #1f1f1f; 
padding: 0px ; 
border:0px ; 
margin:0px; 
}

これまでのところ私のCSSです。

ここは自分のHTMLです。現時点では非常に基本的です。

<html> 
    <head>  
    <title> 
    Ice Arena 
    </title>   
    </head>  
    <body>  
      <div id="mainPage">  
       <div id="navBar">  
       </div> 
       <div id="leftPanel">  
       </div> 
      </div>  
    </body> 
</html>

私が言ったように、私はなぜこれをやっているのかわかりません。私は間違いを犯したと確信しています、私はまだCSSとHTMLの初心者です。

出典

2017-05-19 Musty

ようこそStackOverflow！あなたの 'html'コードも投稿してください:) – threeFatCat

は、以下のCSS marginリセット追加：

html, 
body { 
    margin: 0; 
}

スニペットを以下：

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
#body { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
#mainPage { 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-color: #2469ff; 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navBar { 
 
    height: 70px; 
 
    width: 100%; 
 
    Background-color: #1f1f1f; 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
}

<body> 
 
    <div id="mainPage"> 
 
    <div id="navBar"> 
 
    </div> 
 
    <div id="leftPanel"> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-05-19 23:18:38 Syden

以下のように本部CSSパラメータを作成します。

margin: 0 auto;

をこれはあなたのマージンを中心に説明します。

出典

2017-05-19 23:12:58 CodePlague

がbodyから、デフォルトのマージンを削除するには、以下を使用します。

html, 
body { 
    margin: 0; 
}

私は強くあなたがこの読むことをお勧め：`body` [表示用

Default CSS Values for HTML Elements

デフォルトCSS値：ブロック;マージン：8px;]

#body { 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
#mainPage { 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-color: #2469ff; 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navBar { 
 
    height: 70px; 
 
    width: 100%; 
 
    Background-color: #1f1f1f; 
 
    padding: 0px; 
 
    border: 0px; 
 
    margin: 0px; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
}

<html> 
 

 
<head> 
 
    <title> 
 
    Ice Arena 
 
    </title> 
 
</head> 
 

 
<body> 
 
    <div id="mainPage"> 
 
    <div id="navBar"> 
 
    </div> 
 
    <div id="leftPanel"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-05-19 23:15:13

助けてくれてありがとう。これはうまくいった。将来私はこの問題がある場合。それは常にマージンですか？ – Musty

@Mustyは、このhttps://www.w3schools.com/cssref/css_default_values.aspを読むために5分を要し、ボディはデフォルトで8ピクセルのマージンを持っています。 –

は、HTMLやボディスタイリングを追加します。

html, body{ 
padding: 0px ; 
border:0px ; 
margin:0px; 
width:100%; 
height:100%; 
}

出典

2017-05-19 23:16:24 ATerry

あなたのCSSの#bodyから＃を削除してください。

あなたのCSSがあるべき...

body{ 
padding: 0px ; 
border:0px ; 
margin:0px; 
width:100%; 
height:100vh; 
}

出典

2017-05-19 23:18:36 Axion

この問題の解決策非常に簡単です。

body{.....}

ハッシュタグ（＃）を一意のHTMLタグに使用する必要はありません。

出典

2017-05-20 00:10:04 bestwebdevs

ページの端にあるギャップを取り除くにはどうすればよいですか？

答えて

私は強くあなたがこの読むことをお勧め：body [表示用

Default CSS Values for HTML Elements

関連する問題

私は強くあなたがこの読むことをお勧め：`body` [表示用