CODEWITHSUNDEEP
csshtml
KevInSol
KevInSol

Reputation: 2610

HTML5 footer - margin that I can't remove

I've started a site based on HTML 5 Boilerplate and I want a basically all white site but a grey background to my footer. Problem is that there is a margin (and pretty sure it's a margin not padding or white border) below the footer leaving a white strip below my grey footer.

I've cut everything down in order to post here and moved my CSS inline, plus changed the colours to make it more visable;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="background:#C0C0C0;">
    <img src="1by1.gif" width="700" height="1000" border="0" alt="">
        <div style="border-top: 1px solid #666366;background:#FFFF33;">
            <footer style=" max-width: 1200px; margin: 0 auto;">
                footer
            </footer>
       </div>
    </body>
</html>

and it's online here

Thanks, Kevin

Upvotes: 2

Views: 8402

Answers (5)

Abderrahman Moughazi
Abderrahman Moughazi

Reputation: 46

if you wanna make footer without margin in the bottom you can add only the height attribute in your css file and delete the margin bottom if existed.

footer{
  height : 120px;
  margin-bottom:0;
}

Upvotes: 0

user5765012
user5765012

Reputation:

Had a similar problem. Try this: inside the footer put a <p> paragraph. And then make a css rule for the 'footer p', where you set the proper margin.

Upvotes: 0

prashant
prashant

Reputation: 471

Only adding one thing can give you the solution that is-
add margin:0 to body
body { margin:0; }

Upvotes: 1

Simone
Simone

Reputation: 21262

You can use:

body {
    margin:0;
}

Or (better) include normalize.css in your page.

Upvotes: 3

Jonas Grumann
Jonas Grumann

Reputation: 10786

You have a margin on your body:

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

should solve the issue

Upvotes: 3

Related Questions