CODEWITHSUNDEEP
htmlcss
FoamyGuy
FoamyGuy

Reputation: 46856

Why is the margin to the top of my page?

MyPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Color Flash Cards</h1>
    </div>
</div>
</body>
</html>

index.css

body{
    background-color: #31859C;
    margin-left: 0px;
    margin-top: 0px;
    overflow-x: hidden;
}
#header{
    margin-top: 0px;
    height: 120px;
    background: #9838CE;
}
#title{
    margin-top: 0px;
}

result:

Ghost Margin

Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?

Upvotes: 2

Views: 122

Answers (6)

dsfg
dsfg

Reputation: 130

use reset css for default browser setting will be reset.

http://meyerweb.com/eric/tools/css/reset/
enter code here

Upvotes: 0

lazyprogrammer
lazyprogrammer

Reputation: 629

Two things: You might want to add

body{
  padding:0;
 }

but that's not the real issue, its the H1 tag that is spoiling the layout

add this to your css

h1{
margin-top:0;
}

here is a little fiddle

Upvotes: 0

ckpepper02
ckpepper02

Reputation: 3457

Try setting the margins of html to 0 as well.

html {
margin:0;
padding:0;
}

Upvotes: 0

user1823761
user1823761

Reputation:

Set the margin of h1 tag to 0:

h1 { margin: 0; }

See jsFiddle demo.

Upvotes: 0

Ian
Ian

Reputation: 6144

All headings have a default margin that can be canceled out with:

h1 {
    margin: 0;
}

Demo: Dabblet Demo

I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.

Upvotes: 5

Kevin Boucher
Kevin Boucher

Reputation: 16685

One of two things might be causing this:

  1. Padding in the body? Add padding: 0; to body.

  2. The top margin on the H1. To combat this add overflow-hidden; to #header

Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).

Upvotes: 2

Related Questions