Margin above and to the left and right of the header containing the navbar despite setting margin:0 explicitly

Question

Navbar component-

body {
  margin-top: 0;
  padding: 0;
  font-size: 18px;
}

.container {
  width: 95%;
  margin: 0 auto;
}

header {
  margin-top: 0;
  background: blue;
  padding: 1em;
}

a {
  color: white;
  text-decoration: none;
}

a.logo {
  font-weight: bold;
}

nav {
  float: right;
}

ul {
  list-style-type: none;
  margin: 0;
  display: flex;
}

li:hover {
  filter: brightness(50%);
}

li a {
  padding: 1em;
}

<header class="head">
  <div class="container">
    <a href="#" class="logo">Home</a>
    <nav>
      <ul>
        <li> <a href="#" routerLink="/"> hello</a></li>
        <li><a href="#" routerLink="/"> whatsup</a></li>

      </ul>
    </nav>
  </div>
</header>

<div class="container">
  <router-outlet></router-outlet>
</div>

I am using chrome I notice a thin white strip of space at the top and the left and the right of the header component containing the navbar. How can i remove this such that the white space is replaced by navbar color ie. blue.

I am new at css, and Would be good if an explanantion of the cause could be provided. Thanks

body {
    display: block;
    margin: 8px;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
}

Added the css that displays on the inspect element for further clarity

I have set margin-top for body to 0 in the css given above and have also tried margin: 0 but it doesnt seem to help — alphason, Aug 28 '20 at 19:05
Why did you roll back th edit by @j08691 that added your code to a snippet? It was still your code *exactly*, just in a runnable format so we could see it without having to copy it ourselves to test - i.e. easier for us to help you (which is what I assume you are hoping for!). As you can see in the snippet with your code (run it in full page so you can see), there is no space above the `header` in that code. If it is happening in your project, something else is adding it. The space on the left is to do with the `margin` on the *other* sides that you didn't set to `0`. — FluffyKitten, Aug 28 '20 at 19:13
I dont think anything else could be adding this issue because i was merely using just this html and css file. Since the snippet shows no margin at the top could it be a browser thing or a developmental server issue? — alphason, Aug 28 '20 at 19:24
Well as you can see in the snippet, the code you posted doesn't add an space to the top, so *that* code isn't adding it. If you are seeing space there then it has to be something else. Did you check the element inspector to see which element the space is on? — FluffyKitten, Aug 28 '20 at 19:30
i checked the space is on account of body according to the inspect element. But even after explicitly putting margin:0px margin-left:0px margin-right:0px, it is being overwritten by the browser default for some reason o.0 — alphason, Aug 28 '20 at 19:50
@alphason That shouldn't happen. Can you show us the css that is being applied to the `body` in the element inspector? You should be able to select and copy, but if not an image will do in this case (images of code are generally not allowed, but this is for illustration so it should be ok). Please show all the css that appears in the panel, not just the top class — FluffyKitten, Aug 28 '20 at 20:24
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220638/discussion-between-alphason-and-fluffykitten). — alphason, Aug 28 '20 at 20:44

score 0 · Answer 1 · answered Aug 28 '20 at 19:05

0

I changed the margin-top:0 with the margin:0 for the body.

I hope it would work.

body {
  margin: 0;
  padding:0;
  font-size: 18px;
}

answered Aug 28 '20 at 19:05

kerimcan islamoğlu

7
2

score 0 · Answer 2 · answered Aug 28 '20 at 21:08

0

Styling inline for body was one workaround that worked incase the browser doesnt recognize body css(assuming there wasnt any errors in the css ofcourse) and applies default styling.

answered Aug 28 '20 at 21:08

alphason

41
1
9

That’s a temporary workaround for the problem but it doesn’t identify the real issue or offer a solution. Did you have any luck in fixing the actual problem? Stack Overflow is a Q&A repository for all users, so an actual solution would be more beneficial for the site - adding online styling to an element isn’t a feasible solution in most situations. – FluffyKitten Aug 28 '20 at 22:36

score 0 · Answer 3 · answered Aug 28 '20 at 21:14

From the update in your question where you show us the CSS being applied, as seen in the element inspector, we can see that your CSS is not being picked up by the browser at all.

Its difficult to tell why, but here are a few things that can help you fix it:

If it is in an external CSS file, check that the file is being included
Check for typos in the CSS for the body
Check for typos or misplaced } in any CSS before the body CSS - an error in preceding CSS could prevent the rest of the CSS in that file from being applied
Try adding that CSS directly into the HTML in a style tag to see if it works there... if so:
Try deleting the CSS and retyping it manually - Very occasionally I've seen issues where code copied from the internet or elsewhere can have hidden characters that cause problems.

Margin above and to the left and right of the header containing the navbar despite setting margin:0 explicitly

3 Answers3