CSS top margin

Question

I am a relatively new self taught front-end developer. I have this problem with the top margin on my documents. It remains a margin on top.

Usually I have been using the * selector, and it leaves no margin what so ever on every element. But I have been told that is not a good way of doing it, and you don't want to remove all margin and padding from every element(?).

So I have tried to use the body selector, and gave that margin: 0; and padding: 0; but still it's this margin on top. What is the "right" way of doing this?

Followed under is my html and css.

@import url('https://fonts.googleapis.com/css?family=Work+Sans:500');

body {
 padding: 0;
 margin: 0;
}

header {
 background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>My Website</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <div>
  <header id="top">
   <h1>My Website</h1>
   <nav>
    <ul>
     <li><a href="#about">ABOUT</a></li>
     <li><a href="#contact">CONTACT</a></li>
    </ul>
   </nav>
  </header>

  <section id="about">
   <h2>Semi heading</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>

  <section id="contact">
   <h2>Semi Header</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
 </div>
</body>
</html>

@VXp That would reset ALL margins of ALL elements (defined by browser styles) to zero, which would require redefining ALL margins for all elements, so I wouldn't so simply say "there's nothing wrong with it" — Johannes, Nov 29 '17 at 23:43
@dippas pointing to a question which is supposed to be a duplicate which is marked as a duplicate itself *and* doesn't answer the *specific* question is not really helpful for the OP — Johannes, Nov 30 '17 at 00:14

Johannes · Answer 1 · 2017-11-30T00:17:22.597

The cause is a phenomenon called "collapsing margins": Whatever element is first inside the body, its margin-top will "collapse" (=unite) with the body margin-top. So, in your case, that's the first h1 element (its default margin defined by the browser stylesheet), whose margin-top extends the body, creating a maring-top for the body.

You can apply this to avoid this phenomenon:

h1:first-of-type {
  margin-top: 0;
}

Note: Usually, that h1 would be inside a header or something similar, which usually would be a DIV, with padding etc. So you wouldn't have to apply this, because the container of that h1probably wouldn't have a margin-top and the h1 wouldn't be placed at the very top of the header.

@import url('https://fonts.googleapis.com/css?family=Work+Sans:500');
body {
  padding: 0;
  margin: 0;
}

header {
  background-color: red;
}

h1:first-of-type {
  margin-top: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>My Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div>
    <header id="top">
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#about">ABOUT</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </nav>
    </header>

    <section id="about">
      <h2>Semi heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <section id="contact">
      <h2>Semi Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>
</body>

</html>

CSS top margin

1 Answers1