Geek Answers Handbook

Margin: 0; does not set margins to 0

I am new to web design and I am trying to create a title for a web page. However, I seem to be getting a little empty space above it. I tried to add a normalized stylesheet to my document and set the html, body and header fields to 0, but nothing works. How to remove this gap?

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;
}
+4
source share
2 answers

This is a two-part problem with two alternative solutions.

Solution 1:

First item <h1>in your item <header>. h1 elements have built-in and of 16px. margin-topmargin-bottom

-, float: left; . float: left; header {} CSS, :

header h1 {
    margin-top: 0px;
}

:

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>
Hide result

2:

float: left; margin-top ul , 16px . :

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

, 1.

, , , . , * {} -, CSS reset.

+4

:

* {
    margin: 0;
    padding: 0;
}

margin: 0; padding: 0; *, . :

* {
    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>
Hide result

:

ul {
    margin: 0;
}

ul . 

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>
Hide result

:

, . :

*{
    clear:both;
}

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>
Hide result
0

More articles:


All Articles