Ownerless margin above
tag

Question

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.

Isn't it `
` itself? Headings are always packed with noticeable margins.. — tomsseisums, Jun 05 '11 at 19:13
@Ben Alpert Added an example. I thought it was pretty clear before so I didn't bother. — Baruch, Jun 06 '11 at 06:16
What you're describing should already be included in the parent container. Can you post the exact problem you're dealing with? — Wex, Jun 06 '11 at 07:20

score 5 · Answer 1 · answered Jun 05 '11 at 21:57

5

you can try this code cause h1 has a default margin

h1{margin:0;}

answered Jun 05 '11 at 21:57

Reda

711
6
17

The question is really about why that margin is not included in the parent container. – Baruch Jun 06 '11 at 06:01
really I tried to figure it out but I did not fined a clear answer but by the way if you set a hight to the container and set h1 as position:absolute the margin will be add to the container really I don not know an explanation for that situation h1{position:absolute} div.container{height:200px;} – Reda Jun 06 '11 at 12:57

score 4 · Accepted Answer · edited May 23 '17 at 12:12

4

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.

edited May 23 '17 at 12:12

Community

1
1

answered Jun 06 '11 at 08:04

Baruch

20,590
28
126
201

score 0 · Answer 3 · edited Oct 01 '14 at 07:27

0

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

edited Oct 01 '14 at 07:27

Darpan

5,623
3
48
80

answered Oct 01 '14 at 07:01

Geoffrey Scott Howells

1

score 0 · Answer 4 · answered Jun 06 '11 at 07:18

0

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.

answered Jun 06 '11 at 07:18

Wex

15,539
10
64
107

Ownerless margin above tag

tag

` itself? Headings are always packed with noticeable margins..

4 Answers4

Ownerless margin above
tag