CODEWITHSUNDEEP
css
user2989236
user2989236

Reputation: 71

How to remove white space around header image?

I am experimenting with my header but I can't remove the white space around it, this is what my code looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<style type="text/css">
.header{background:url(http://likenation.com/theme/pes/images/header_bar.png) repeat-x;border-bottom:1px solid #131619;height:56px}
.header-content{width:1000px;margin:auto}
</style>
</head>
<body>
<div class="header">
    <div class="header-content">
        Test
    </div>
</div>
</body>
</html>

And this is what the header looks like: http://gyazo.com/b71ad68c24c2bdb49619a44c551918c5.png

I would really appreciate if someone could help me fix this.

EDIT:

Since I can't answer my own question, I will post it here:

I added this:

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

and it worked, thanks for the help guys!

Upvotes: 1

Views: 14054

Answers (4)

Henk Jansen
Henk Jansen

Reputation: 1142

Add this to your CSS:

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

Upvotes: 5

kinghfb
kinghfb

Reputation: 1021

You need to zero out the paddings/margins on your html/body:

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

I would probably use a proper reset though.

Upvotes: 4

BrownEyes
BrownEyes

Reputation: 2287

You need to reset the default CSS that is set by the browser; An easy way to do this is: 

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

And if you want to reset more/all elements, you can check out severeal CSS reset files at http://www.cssreset.com/

Upvotes: 2

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

There is an implicit margin and padding for body that depends from browser to browser. As a good practice you can add margin:0 and padding:0 to body element

Upvotes: 2

Related Questions