I've got a div containing another div that contains text, and for some reason the contained one has a small (about 10-20px) space between the top of it and the top of the containing div.
Can someone please tell me why this is happening and how to fix it?
Here's my code:
HTML
<div id="footer">
<div id="email">
<p><a href="mailto:example@example.com">Email - example@example.com</a></p>
</div>
</div>
CSS
#email {
width:auto;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#333333;
text-align:center;
}
#email a:link {
color:inherit;
text-decoration:inherit;
}
#email a:hover {
text-decoration:underline;
}
#footer {
width:1024px;
height:200px;
position:absolute;
z-index:8;
float:left;
margin-top:1717px;
padding:0;
}
NoizyCr1cket wrote:
I've got a div containing another div that contains text, and for some reason the contained one has a small (about 10-20px) space between the top of it and the top of the containing div.
Can someone please tell me why this is happening and how to fix it?
This is yet another case of margins, padding and borders. The best way to avoid these problems in ALL HTML/CSS pages is to start the CSS with this code:
* {
margin: 0;
padding: 0;
border: 0;
}
All your other CSS codes are entered after the above code. So I suggest put the above code at the top of your style sheet so that it universally zeros out all phantom margins and all that. You should now have full control of your styles to shape the page as you want it.
Good luck and post back.
I'm not a great fan of the various CSS reset rules because they can cause as many problems as they solve, in my opinion. I believe it's much better to learn how to recognize margin/padding issues and fix them on the locus where they are occurring than it is to affect every tag on the page in a way that could cause them to behave unexpectedly. Most often the problems such this are caused by an escaping margin (i.e., the FIRST tag within a container has a default margin that escapes from the containing envelope and creates an apparent space ABOVE the container. This can be most effectively solved in one of these ways -
1. Apply an overflow:hidden style to the container (only if the container does not have an explicit height).
2. Apply a 1px top border to the container (if you can match colors with the background)
3. Remove the top margin from the tag whose top margin is escaping with margin-top:0;
North America
Europe, Middle East and Africa
Asia Pacific