How to Remove Margin Space Around Body or Clear Default CSS Styles

How to remove margin space around body or clear default css styles

body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html

body { 
    margin: 0;   /* Remove body margins */
}

Or you could use this useful Global reset

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

If you want something less * global than:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

some other CSS Reset:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css

http://meyerweb.com/eric/tools/css/reset/

https://github.com/necolas/normalize.css/

http://html5doctor.com/html-5-reset-stylesheet/

…

Removing body margin in CSS

I would say that using:

* {
  margin: 0;
  padding: 0;
}

is a bad way of solving this.

The reason for the h1 margin popping out of the parent is that the parent does not have a padding.

If you add a padding to the parent element of the h1, the margin will be inside the parent.

Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.

Remove space around divs

Your body's margin needs to be set to 0.

body{margin: 0;}

Additionally I highly recommend using a CSS reset at the top of your CSS as below to avoid other possible conflicts:
JSFiddle

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font-weight: normal;
        vertical-align: baseline;
        background: transparent;
    }

Remove margin from body in React

You should use global with jsx style

<div>
    <style jsx global>{`
      body {
        margin: 0px;
        padding: 0px;
      }
    `}</style>
  </div>

How to remove default margin in angular app?

Why does angular use what default padding?

Problem resolved!

I added this code in the global styles:

body {
  margin: 0;
  padding: 0;
}

css reset margin problem.i cant get rid of margin

Add the color to the header. See below:

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

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

html {
  font-family: 'Space Mono', monospace, sans-serif;
}

header { background: yellow; }
 
#navbar {
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem 0.75rem 1rem;
}

#navbar ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}

#navbar ul li a {
  padding-left: 0.75rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;

<html>
<head>
</head>

<body>

  <header>
    <div class="container">
      <nav id="navbar">
        <h1 class="">Hayden Dominic Christiansen</h1>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#bio">Bio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

</body>

</html>

How to Remove Margin Space Around Body or Clear Default CSS Styles