Member Avatar for Mapper99

I have a very simple webpage using css. For some odd reason there is about a 20px space at the top of my page. I have no idea where this is coming from! Any ideas?

Here is the page that is causing me grief:


http://www.laudontech.com/exhibitfloorplans/demomaps.css

Thanks in advance,

Mapper

  • 13 Contributors
  • 13 Replies
  • 724 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Several replies already hit useful checks: and called out browser defaults and resets, clarified cascade/order issues, and and flagged stray content and header margins. The likely root cause not yet named in the thread is margin collapse: when the very first block-level child (for example an H1 or P) has a top margin and its parent has no border, padding, or new block formatting context, that child’s top margin can “escape” and appear as a gap above the page. Zeroing body margins helps in many cases, but collapsing margins can still create the visible strip.

Quick diagnostic steps:

  • Use the browser inspector to hover the top area and check computed margins for the document body and the first visible element.
  • Temporarily add a visible border or background to the page wrapper to see whether the gap is inside or outside the wrapper.
  • Look for stray nodes (empty text,  , server-inserted code) before the header and confirm a valid DOCTYPE at the top of the document.

Two safe fixes that avoid brute negative margins:

/* remove top margin only from the wrapper's first child */
.wrapper > :first-child {
  margin-top: 0;
}

/* prevent margin collapse without visible change */
.wrapper {
  border-top: 1px solid transparent;
}

Either rule will stop the child margin from escaping; the first is targeted, the second establishes a nonzero border so the margin cannot collapse. Use whichever fits the layout and avoid hiding the symptom with negative margins. If the gap remains after these checks, inspect server-side output (BOM, stray whitespace or injected tags) and the computed styles in DevTools to find the overriding rule.

Recommended Answers

All 13 Replies

Member Avatar for atifdmv 
body {
  text-align:center;
  font-family: Georgia, Serif;
  background: #000000;
 margin:0px;
}

i think this can help u

Member Avatar for almostbob

order is important in css
in some of the styles you set

margin-top:0;
margin:5px;

result margin-top:5px; in other styles you correctly zero the top margin

margin:5px;
margin-top:0;

a group of applied 5px will soon add to the 'missing' amount

Member Avatar for MidiMagic

Do not put px on a zero value. It is not supported. Put 0 instead of 0px.

Member Avatar for !!underlink!!

make sure there are no   in your code that will create a space if in the wrong place

Member Avatar for MJ Pieterse

also make sure that the div or table you have as your header, has no margin-top pushing it down.

Member Avatar for seointexas

I followed most of the advice I found on here, and finally what worked for me was the body-top:0; I had originally used just the standard header or wrapper or whatever:0px; so hats off to you and kudos good sir.
Enjoy.
and if anyone wants to visit my humble self, feel free to wander over to

Edited by Ezzaral because: Snipped url. Please read the rules about not promoting your site.
Member Avatar for rany1234

you need to set a negative margin rtfm -20px etc easy peasy

Member Avatar for shibin vadayatt

check the margin-top and padding-top of ur each style class (especially outer)... and check the heights and min-height of each div tag... google chrome inspect functionality may be helpful to solve this...

Member Avatar for neilbryansmith

The body needs to have "margin:0;" set in the CSS to make the inner DIV's align to the top of the page.

Member Avatar for neilbryansmith

You have to set the top-margin to a minus figure. I currently can't see a way around this issue. Everything should stay inside the DIV, especially if add "overflow: hidden;" to the CSS, but it doesn't obey this. The spacing is cause by the contents margin values. You can add a spacer element as "<p class="spacer">&nbsp;</p>" to the innder top part of your DIV and set the CSS "text-size:" as "0px;" with a "margin:0;" as well.

Member Avatar for designershiv

add default browser css reset

*{
margin:0;
padding:0;
}
Member Avatar for Smeesny

Hello,

I am hoping that someone can lend a hand here with a html layout. I'm very new to site design so please forgive the sloppyness of my code

Member Avatar for JorgeM

-

That's interesting since your signature is related to web design but OK. Please start your own thread and post your sample code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.