margin: 0; is not setting margin to 0

Question

I'm new to web design and I'm trying to create a heading for a web page. However, I seem to be getting a bit of empty space above it. I've tried adding a normalizing stylesheet to my document, and setting the margin and padding of the html, body, and header element to 0, but nothing seems to work. How can I delete this white space?

HTML

<html>
  <head>
    <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
  </head>
  <body>
    <header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>
  </body>
</html>

CSS

html, body, header {
  margin: 0;
  padding: 0;
}

body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

possible duplicate of [How can I remove space above header?](http://stackoverflow.com/questions/14423781/how-can-i-remove-space-above-header) — Kawinesh S K, Apr 16 '15 at 04:06

TylerH · Accepted Answer · 2015-04-16T04:22:57.817

It is a two-part problem, with two alternate solutions.

Solution 1:

First, the <h1> element within your <header> element. h1 elements have an inherent margin-top and margin-bottom of 16px.

Second, the float: left; is causing your header to shift down. Remove float: left; from header {} and add this to your CSS to have your header sit flush with the top of your page:

header h1 {
    margin-top: 0px;
}

Example:

header h1 {
    margin-top: 0px;
}

html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

<header>
  <a href="#">
    <h1>Jason K</h1>
    <h2>Bum</h2>
  </a>
</header>
<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="#">
          <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
          <p>sample sample sample</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
          <p>sample sample sample</p>
        </a>
      </li>
    </ul>
  </section>
</div>

Solution 2:

Alternatively, you can leave the float: left; in and remove the margin-top from the ul element, which also has inherent margins of 16px on the top and bottom. Add this:

header h1, #gallery {
    margin-top: 0;
}

And you will get the same effect as Solution 1.

You should avoid using a universal selector, because that will cause unintended consequences down the road, not to mention the fact that universal selectors are very slow. There is a small mountain of literature available on the internet about the dangers of using * {} for anything, especially as a CSS reset tool.

ketan · Answer 2 · 2015-04-16T04:09:16.390

First solution:

* {
    margin: 0;
    padding: 0;
}

Use margin: 0; and padding: 0; to * will solved your issue. Check below your updated code:

* {
    margin: 0;
    padding: 0;
}

body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>

Second solution:

ul {
    margin: 0;
}

Because ul will take margin. Check Fiddle here

ul {
    margin: 0;
}

html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>

Third solution:

Give clear both to universal selector will solved you issue. like:

*{
    clear:both;
}

Check Fiddle.

*{
    clear:both;
}


html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>

Universal selectors are dangerous and overly powerful. The problem here is *one element*, not all of them. — TylerH, Apr 16 '15 at 04:00
actually `ul` will take margin i updated my answer check new fiddle. If not want to give to give universal selector — ketan, Apr 16 '15 at 04:05

margin: 0; is not setting margin to 0

2 Answers2

Solution 1:

Solution 2: