Search code examples
htmlcssmargin

Css - White margin on top of a web page


I've tried every possible combination of provided solutions to get rid of that margin such as:

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

and

* {
   margin: 0px;
   padding: 0px;
}

and

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

but it won't help. In fact, i've tried almost every reasonably sounding solution from top 5 stackoverflow question on my topic and still got no result. My web page is:

body {
  line-height: 1.6;
  color: #3a3a3a;
  font-family: "Arial", sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
}

.main-header {
  background: #3acec2;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>


  <header class="main-header">
    <h1 class="name"><a href="#">Header text here</a></h1>
  </header>

I use normalize version 7.0 up to date on 30.08.


Solution

  • The <h1> margin here actually comes from normalize.css itself:

    /**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */
    
    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }
    

    And of course tag selector is more specific than universal selector, that's why solutions with * don't work.

    The actual solution is very simple - in style.css:

    h1 {
      margin: 0;
    }