Gap at top of page despite margin:0 and padding: 0

Question

There's a 32px gap at the top of my site, despite setting margins and paddings to 0. I know it's 32px because I can fix it with padding: -32px. But then I have a gap at the bottom! In Firebug, it seems the body only start 32px down from the beginning of the HTML element, even though I've set margins and paddings to 0.

Here's my CSS:

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body { 
  background-color: #a7a9ac; 
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

Container banner is the topmost div, followed by container (which includes content).

What do you mean, tags? The leading CSS:? That was to signal the topic. — MrB, May 06 '11 at 09:01
Correct. The topic is signalled by the question tags, which exist to provide a consistent and indexable mechanism for what we used to do on message boards (that is, writing tags in titles). — Lightness Races in Orbit, May 06 '11 at 09:03
I tried putting your style in a simple html doc with the 2 divs you mentioned, but any text I placed in .container_banner started at the top of my browser (no gap). Can you post some html that displays this problem? Also: does it occur in all browsers, or only in specific ones? — Jeroen, May 06 '11 at 09:05
This is the first Google result that comes up when searching this issue, so for anyone who has this problem even with borders, margins, padding, etc., set to 0, I have one last suggestion: Copy your code into a blank file in Notepad++, click Encoding > Encode in UTF-8 without BOM, and save it over your existing file. The BOM encoding has bitten me more than once. — orfdorf, Dec 16 '15 at 22:55

James · Accepted Answer · 2011-05-06T09:23:46.713

I think this is caused by the use of position: relative and your h1 element inheriting a margin by default. When you use position: relative, the margin does not seem to be shifted with the actual content and therefore gets applied to the top of the page.

I have changed the relevant CSS to fix this:

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

You may need to do the same for any other elements that are set to position: relative and have a margin (e.g. h3 tags)

It would be best to cut down on the use of position relative as it is somewhat difficult to predict such behaviour.

This worked for me. Background gradient on a wrapper element was starting from the point of the first element and not the top of the page as intended. Set `margin-top` to 0 and used `padding-top` instead. — user2449231, Apr 02 '15 at 17:40

score 4 · Answer 2 · edited Nov 03 '12 at 08:03

4

WordPress automatically adds in an admin bar using wphead(); You and I have probably somehow deleted the admin bar stuff so it just appears empty, but if we had of left the admin bar details it'd be there.

Add this to your functions.php to get rid of it:

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

edited Nov 03 '12 at 08:03

Be Brave Be Like Ukraine

7,596
3
42
66

answered Dec 28 '11 at 02:11

This is the way to go! It removes the admin panel on the top and also the gap that it produces. thanks! – Thomas Solti Feb 10 '14 at 23:30

score 1 · Answer 3 · answered Apr 20 '13 at 17:12

My problem WAS : a H2 html tag, which was the first child tag of a DIV, caused a gap on top of the div.

Such gap I would expect using the css 'margin(-top)' property. The DIV had no (inherited) "margin(-top)" CSS property though.

Removing the H2 child removed the unexpected gap but is not a good solution.

What truly solves the problem is setting CSS property "display" for the DIV to 'inline-block'. You can use the H2 (or Hx) without the unwanted gap as consequence then.

<div style="display:inline-block">
  <h2>blabla</h2>
</div>

I hope this is the answer that solves your problem!

score 1 · Answer 4 · answered Aug 22 '15 at 02:53

I have been having exactly the same issue.

The way I have resolved it (at least for now) is by using:

* {
    margin-top: 0;
}

at the top of my stylesheet.

This sets top margin of EVERY element to zero, so use with the understanding of this, and that defining the 'margin-top' property again and again may be required.

Sam

score 1 · Answer 5 · answered May 06 '11 at 09:00

1

I'm not quite sure what you mean, but I imagine your problem is either going to be down to some invalid HTML (make sure you are using a correct doctype), or the padding-top: 20px; rule in your container class.

answered May 06 '11 at 09:00

Graham Clark

12,886
8
50
82

That is to remove a gap between container-top and container. If I remove it, the top gap is still there. – MrB May 06 '11 at 09:18

score 0 · Answer 6 · answered Oct 12 '17 at 12:00

0

if this div was insine body (for example, or any othere div) set margin and padding for 0px; and it should wrok well

<body>
<div class="div_with_gap">
</div>
</body>

and it should fix it

body{
margin: 0px;
padding: 0px;}

answered Oct 12 '17 at 12:00

user8765020

1

score 0 · Answer 7 · answered May 06 '11 at 09:05

0

Or, you have an error in your CSS, color #666666. There is not : between. May be that is causing the CSS to be parsed in the wrong way.

answered May 06 '11 at 09:05

Starx

77,474
47
185
261

Gap at top of page despite margin:0 and padding: 0

7 Answers7

Linked