All geek questions in one place

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

I already set the border, padding and margins for 0px for the body and my two divs. But I still can’t 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; }

What all my CSS is for now.

Here is my HTML. It is very simple 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>

Like I said, I don’t know why he does it. I'm sure I made a mistake, I'm still new to CSS and HTML.

+5
source share
6 answers

Add the following CSS margin reset:

 html, body { margin: 0; }

Below is a snippet:

 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
source

To remove the default field from body use the following:

 html, body { margin: 0; }

I highly recommend you read the following:

CSS defaults for HTML elements

The 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>
+4
source

Make the CSS Div parameter as follows:

margin: 0 auto;

This centers your margin.

+2
source

The solution to this problem is very simple. Just remove hashtag (#) from "body" as follows:

  body{.....}

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

+2
source

Add html and body style.

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

Remove # from #body in your CSS.

Your CSS should be ...

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

Source: https://habr.com/ru/post/1268039/

More articles:


All Articles