CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 525

Why is there spacing?

I have this annoying little bit of spacing I can't remove.

Here's a fiddle.

It's the white padding(?) between the dog and grey box.

I should probably mention I'm in the process of learning about the box model (relative/absolute) etc.

Upvotes: 0

Views: 84

Answers (3)

daniel.porter
daniel.porter

Reputation: 101

Move the wrapper div to encase all the divs. Like this: fiddle

You what the header like this fiddle right

HTML:

<div id="wrapper">
<div id="outer">
       <div id="inner"></div>
</div></div>
<div id="header">
    <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
</div>

Change this #wrapper and #header to this:

#wrapper{
  position: relative; /*or position: absolute; top: 250px;*/
  top: 240px;
  width:100%;
  background-color: lightgrey;
 }


#header{
  position: fixed;
  top: 0;
  width: 100%;
  height:auto;
  background-size: 100%;
}

Upvotes: 0

Brandon
Brandon

Reputation: 3524

#header img { width: 100%; display: block; border: none;}

Upvotes: 1

Simon Arnold
Simon Arnold

Reputation: 16177

use display: block; on your img http://jsfiddle.net/QzYcf/1/

Upvotes: 6

Related Questions