How to remove space at top of page when using float?

Question

I have found a few answers around the web where people have instructed that the way to remove the space at the top of web page is generally some form of:

body {
    margin: 0;
    padding: 0;
}

Source: How to remove blank space on top of page?

Please have a look at the web page I am currently styling: http://web.p0orvmwy7k.treehouse-app.com/

I have determined that declaring float: left; on the header element is producing the space at the top of the page. I'm following along with a styling tutorial on treehouse and they claim this has no effect right now, but will come into play when scaling up to the desktop version of the site.

It has been a few years since the tutorial was produced, so things could've changed in regards to browsers, but I'm just wondering if someone could explain to me why floating the header element would produce that space at the top of the page when the body has no padding or margin and the header has no top margin?

James · Answer 1 · 2014-03-23T08:22:29.490

0

There is a margin-top by default for the h1 inside the logo anchor tag also margin:8px for the whole body element. Remove the margin-top for the h1 tag using the css below.

#logo h1{
    margin-top:0;
}

To reduce margin top further use this:

body{
    margin-top:0;
}

edited Mar 23 '14 at 08:22

answered Mar 23 '14 at 08:11

James

4,540
1
18
34

Your two suggestions make no difference. Can you post a code snippet? – w0051977 Oct 09 '21 at 08:33

score 0 · Answer 2 · answered Mar 23 '14 at 08:17

I would suggest to use RESET.css to avoid such issue while designing the web pages. You can include the following reset.css in your web-page. These css are well know and tested

  /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

For more details regarding the reset.css you can follow : - http://meyerweb.com/eric/tools/css/reset/

Let us know once you apply the reset.css

Thanks, but I am trying to understand why the space is there is the first place. — w0051977, Oct 09 '21 at 08:35

score 0 · Answer 3 · answered Mar 23 '14 at 08:36

0

The float:left on your header element is the cause of this behavior !

At the very bottom of your CSS file put this :

header{float:none;}

make sure NOT to put a dot or hashtag in front of header.

answered Mar 23 '14 at 08:36

developers-have-no-vacation

642
1
5
13

That doesn't make any difference. Can you post a snippet? – w0051977 Oct 09 '21 at 08:31

score 0 · Accepted Answer · answered Mar 23 '14 at 14:03

0

The margin is being caused by #wrapper section p. Remove the margin of that particular element and you should be fine.

Or as suggested, don't float your header.

You would still have the same problem with your footer though: if you were to apply a background-color to it you would also have a gap at the bottom caused by the child-p. In this case you are using clear which causes the same behaviour as for your header.

In general I would suggest you to take a better look on how and where to use float and clear ... http://css-tricks.com/all-about-floats/ should be a good start ;)

answered Mar 23 '14 at 14:03

MMachinegun

3,044
2
27
44

Ah, I totally see it now. Thanks so much for the help and the resource. I'm just following along with a basic web design tutorial and they instructed for it to be added and that it's purpose will come into play later. I think they must have made a slip up in their project files, because in their video they add it and the space goes away, but using their own css files on my version does no such thing. – Dan Schmidt Mar 23 '14 at 15:26
@MMachinegun, I cannot see any reference to margin section p? – w0051977 Oct 09 '21 at 08:34

How to remove space at top of page when using float?

4 Answers4

Linked