How can I get rid of the gap at the edge of the page?

问题

I already set the border, padding and margin to 0px for the body and two of my divs. But I still can't seem to get rid of the gap.

#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;
}

That's all my CSS so far.

Here is my HTML. It's very basic at the moment.

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

As I said, I don't know why it's doing this. I'm sure I made a mistake, I'm still a beginner with CSS and HTML.

回答1:

Add the following CSS margin reset:

html,
body {
    margin: 0;
}

Snippet below:

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>

回答2:

Use the following to remove the default margin from body:

html,
body {
  margin: 0;
}

I strongly suggest you read this:

Default CSS Values for HTML Elements

Default CSS Values for body [ display: block; margin: 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>

回答3:

Make the Div CSS parameter as below:

margin: 0 auto;

This will center your margin.

回答4:

The solution to this issue is very simple. Just remove the hashtag (#) from the 'body' like this:

    body{.....}

There is no need to ever use hashtags for unique HTML tags.

回答5:

Add the html and body styling.

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

回答6:

Remove the # from #body in your CSS.

Your CSS should be...

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

来源：https://stackoverflow.com/questions/44080173/how-can-i-get-rid-of-the-gap-at-the-edge-of-the-page

标签

css

html