CODEWITHSUNDEEP
htmlcss
Baruch
Baruch

Reputation: 21508

Ownerless margin above <h1> tag

I have a <div> with an <h1> tag in it (at the moment that is the only thing. I am building this site top-down). I am getting a very large space above the title. When drilling down with firebug, the space is not included in the <body> or the <div>, but is a margin above the <h1> tag. Shouldn't the whole tag, margin and all, be surrounded by the parent container? is there any way to do this? At the moment that space is completely unstyleable, not belonging to any container.

For example:

<html style="background:green">
<head>
</head>
<body style="background:blue">
    <div style="background:red">
        <h1 style="background:yellow">Hello world!</h1>
    </div>
</body>
</html>

You can clearly see when displaying this that neither the <body> nor the <div> surround that margin.

Upvotes: 1

Views: 5282

Answers (4)

Geoffrey Scott Howells
Geoffrey Scott Howells

Reputation: 1

Using line-height: 0.65em; //tends to reduce or eliminate this over-lapping margin issue.

Upvotes: 0

Baruch
Baruch

Reputation: 21508

I found a similar question here, and following the links a found the answer at these sites:

Basically, it has to do with collapsing margins. To solve the problem I had to add a 1px padding to the container.

Upvotes: 4

Wex
Wex

Reputation: 15695

If you're running into trouble with margin and padding from nowhere, you might want to try using a CSS Reset.

* { 
    margin: 0; 
    padding: 0;
}

The above reset usually works for me.

Upvotes: 0

Reda
Reda

Reputation: 711

you can try this code cause h1 has a default margin 

h1{margin:0;}

Upvotes: 5

Related Questions