How did i get so much space between my divs?


#1

hey, I keep encountering space between my divs in the projects and don't know where they come from or how to get rid of them. any help would be appreciated.


#2

Please post a link to the exercise. A little code (CSS, HTML) might help too. Otherwise you're asking us to shoot at flies.


#3

here's my html:

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="main">
      <div class="container">
        <h1>Move</h1>
        <p>Form healthy habits to take your fitness to the next level.</p>
        <a href="#" class="btn">Learn more</a>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        
        
        <div class="clearfix"></div>
      </div>
    </div>


    <div class="feature">
      <div class="container">
        
      </div>
    </div>
    

  </body>
</html>

And here's the CSS

html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}

.container {
  width: 940px;
  margin: 0 auto;
  text-align: center;
}

/* Main */
.main {
  height: 600px;
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg);
  width: 100%;
  background-size: cover
}

.btn{
 text-decoration: none;
  padding: 10px 40px;
  color: #000;
  background-color: #fff;
  border-radius: 5px;
}

.main h1 {
  font-size: 150px;
  color: #fff;
}

.main p {
  font-size: 18px;
  color: #fff;
}


/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
}

.supporting .col {
  float: left;
  width: 28%;
  padding: 10px;
}

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 20px;
  margin-bottom: 10px;
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 12px;
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

/* Feature */
.feature {
  height: 600px;
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding:50px 0 0;
}

/* Footer */
.footer {
  height: 600px;
}

.footer h1,
.footer h2 {
  color: #fff;
  font-size: 40px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: #fff;
  margin: 0 0 20px 0;
  font-size: 18px;
}


@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}

#4

your <h1>move</h1> is causing the gap, you are dealing with something called collapsing margin, you can read about it here, here is a print screen showing the problem:

Use one of the methods described in the link i provided to resolve this problem


#5

cheers bro, thanks for the help :smiley:


#6

What was your solution?

.main :first-child h1 {
    margin: 0;
}

#7

haha, i don't have one yet, i just did everything else on the project. you got any tips? :smiley:


#8

Sidebar

I'm old fashioned and out of touch, I'll admit. Some things I just cannot let go of, and one of them is header resets. In a raw HTML layout, I like default styles. Once the rubber hits the road, though, default styles be gone!

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: normal;
    text-align: left;
    font-size: 1em;
}

That last rule is a deal breaker for some. On the whole, it's one style fits all.

We can set the header styles for any class the way we see fit, without interference from defaults.

Be sure the generic selector rule appears early in the style sheet so it can be overridden.


#9

Did you try adding the above selector rule to your style sheet?