How to get rid of a white outline around header?

Question

I created a header with <div></div> in html, but when I tested it there is a white outline around header. I created header in <head></head>. Image of header: header

HTML code of my site:

    .header {
      padding: 20px;
      text-align: left;
      background-color: skyblue;
      color: white;
      font-size: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }

<!DOCTYPE html>
<html>
<title>
  NetPlat
</title>

<head>


  <div class="header">
    <a href="login.php">
      <button style="float: right;">Logout</button>
    </a>
    <h1>Home Page</h1>
  </div>
  <style>

  </style>

</head>

<body>

</body>

</html>

Also, `` isn;t ment for elements like `div` that should be inside the `body` — 0stone0, May 18 '22 at 15:33
@0stone0 Oh wow, I didn't know that browsers would even render content in the `head`. They always surprise me with something... — FZs, May 18 '22 at 15:41

score 1 · Answer 1 · answered May 18 '22 at 15:35

1

It's related to your browser's default styling. So you can remove the margin from the body element:

body {
  margin: 0
}

answered May 18 '22 at 15:35

Ibrahim Nergiz

116
3

score 0 · Accepted Answer · answered May 18 '22 at 15:44

This is something related to default browser styles. Basically, it is a set of styles that are added by the browser to the pages. A simple solution is to reset the margin, padding, and box-sizing like the following snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

But for a larger scale website, I do suggest using josh wcomeau reset code snippet:

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

Related Links:

josh advanced reset styles

Yes. And I do recommend modifying these snippets to suit the engineering requirements and the UX/UI. — Mohammed Alwedaei, May 18 '22 at 15:48
Also, when possible use external CSS. Please refer to this article as a reference [How To Add CSS](https://www.w3schools.com/css/css_howto.asp) — Mohammed Alwedaei, May 18 '22 at 15:50

How to get rid of a white outline around header?

2 Answers2