Skip navigation
Currently Being Moderated

Div creating a random margin

Jul 29, 2012 6:17 PM

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;

 

}

 
Replies
  • Currently Being Moderated
    Jul 29, 2012 6:48 PM   in reply to NoizyCr1cket

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 6:41 AM   in reply to NoizyCr1cket

    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;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points