Removing Body Margin in Css

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.

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

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

If you want something less * global:

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://meyerweb.com/eric/tools/css/reset/

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

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

…

Remove margin from body in React

You should use global with jsx style

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

Remove top and bottom body margins

The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle

remove body margin on one div

body{margin:0;}
.fake-body{margin:8px;}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="style.css"></head><body><div class='fake-body'></div>    <div class="custom-mobile-row">        <div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>    </div><div class='fake-body'></div>    </body></html>

How do I remove the top margin in a web page?

I had similar problem, got this resolved by the following CSS:

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Removing a margin from a footer with CSS

In order to remove margin, you should set body margins to 0. Also, if you want to force footer to stay at the bottom of the page, you should set min-height to your body and take advantage of flex. Here is the code snippet:

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  margin: 0;
}

footer {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/footer.png");
  background-position: center;
  color: white;
  text-align: center;
  display: table;
}

footer>p {
  display: table-cell;
  vertical-align: middle;
  font-family: Lato, sans-serif;
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.6667;
  width: 100%;
}

<main>
  <h1> Some text </h1>
</main>

<footer>
  <p>Copyright © <a href="link" class="white_link">Link</a> 2021. All Rights Reserved.
  </p>
</footer>

Removing Body Margin in Css