How to have no space between body and div element in html

Question

I am making a topnav and I don't want space between the body and the div element.

I want to look like that. But the thing is, I do not know how I can 'delete' or 'remove' the space between the body and the <div> element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
</head>
<body>
     <style>
          body {
               background: #484d49;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
          }
     </style>
     <div class="topnav"></div>

</body>
</html>

That's what I have done, but how can I use CSS or JavaScript to delete the space between the elements.

If you could help, that'd be great.

Thanks,

Ring Games

gavgrif · Answer 1 · 2020-08-19T23:50:54.053

Your style declaration needs to be in the head of the page - not the body. And because most browsers style the html and body to have a bit of space around - you should set margin and padding to 0 on each.

Also - you should investigate the semantic elements to use for the nav and main - eg <nav> ... </nav> and <main> ... </main> in order to make the code as good as you can.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
     <style>
        html, body {
          height: 100%; 
          padding: 0;
          margin: 0;
        }
          body {
               background: #484d49;
               color: #fff;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
               padding: 8px
          }
           .main-content {
               height: 100%;
               padding: 8px
          }
     </style>
</head>
<body>
     <div class="topnav">This is the navigation</div>
     <div class="main-content">This is main-content</div>
</body>
</html>

Better yet, `body { margin-top:0; }` because your code will remove all the margins, which is likely not desired. Padding is not what's causing the undesired space here as it controls the space within the element, not outside of it. — Scott Marcus, Aug 19 '20 at 23:49

score 1 · Accepted Answer · answered Aug 19 '20 at 23:51

1

You can remove the top margin of the body by styling it to have margin-top:0;.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Why Linux is just better than Windows - Ring Tips </title>
    <link rel="icon" href="linux.png">
</head>
<body>
     <style>
          body {
               margin-top:0;
               background: #484d49;
               padding: 0;
               -webkit-font-smoothing: antialised;
          }
          .topnav {
               top: 0;
               position: sticky;
               background: #a5b0a8;
               border: 0.5px solid black;
               width: 100%;
               height: 100px;
               overflow: hidden;
               z-index: 2;
          }
     </style>
     <div class="topnav"></div>

</body>
</html>

answered Aug 19 '20 at 23:51

Scott Marcus

64,069
6
49
71

and that is the reason why I have margin and padding set to 0 in my solution.... your solution has space to the left and right of the topnav... mine does not :) – gavgrif Aug 19 '20 at 23:53
1

The OP wants to remove all the margin for body because his nav-bar don't just connect to the top but also the side of the body – Revon Zev Aug 19 '20 at 23:53
This works :) Thank you very much. – RingGamesCompany Aug 19 '20 at 23:54
@RingGamesCompany You're welcome. Please consider marking this as "the" answer by clicking the check mark at the top left of the answer. – Scott Marcus Aug 19 '20 at 23:57

Revon Zev · Answer 3 · 2020-08-19T23:48:38.977

0

You can use margin to remove the space between body and stuff inside the body not padding.

body {
  margin: 0;
}

edited Aug 19 '20 at 23:48

answered Aug 19 '20 at 23:46

Revon Zev

105
5

Better yet, `body { margin-top:0; }` because your code will remove all the margins, which is likely not desired. – Scott Marcus Aug 19 '20 at 23:47
1

actually I'm a huge fan of using margin: 0 0 0 0; if you want to chaneg the side and bottom margins you can still insert them and you use overall less lines and space. – tacoshy Aug 19 '20 at 23:53
@tacoshy That's generally considered a bad page design for the same reason that books have margins around all four sides of the text. It's just easier to read. – Scott Marcus Aug 19 '20 at 23:56
not really depends on what you want to achieve. having no body margins doesnt mean that you have no spaces to the border of the screen in the end. besides by adding a margin to all 4 sides you can defien the amrgin for all 4 sides as you want which is my actual point. – tacoshy Aug 20 '20 at 00:00

How to have no space between body and div element in html

3 Answers3