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>
开发者_C百科 </div>
</body>
</html>
You can clearly see when displaying this that neither the <body> nor the <div> surround that margin.
you can try this code cause h1 has a default margin
h1{margin:0;}
I found a similar question here, and following the links a found the answer at these sites:
- http://blog.siteroller.net/collapsed-margins-and-free-margins
- http://complexspiral.com/publications/uncollapsing-margins/
- http://reference.sitepoint.com/css/collapsingmargins
Basically, it has to do with collapsing margins. To solve the problem I had to add a 1px padding to the container.
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.
Using
line-height: 0.65em; //tends to reduce or eliminate this over-lapping margin issue.
加载中,请稍侯......
精彩评论