Margin top and bottom problems

Discussion in 'HTML & Website Design' started by balkanboy, Oct 26, 2005.

  1. #1
    I noticed that when I place some div on my page and give margins top and bottom 0 I get some unwanted margins in Firefox? Did you have that problem? Anybody has a solution?
     
    balkanboy, Oct 26, 2005 IP
  2. Roze

    Roze Guest

    Messages:
    403
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yes I had the same problem and someone here helped me! Check carefully for white space and blank spaces in the code... I had a strange bottom padding appear thanks to a line break in my html and cleaning it up did the trick!
     
    Roze, Oct 26, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The most common reason for this is a thing called collapsing margins. For example, in this markup the margin for p collapses through the outer div and even though the outer div has margin set to zero, it still doesn't touch the top div:

    <head>
    <style type="text/css">
    div {margin: 0; padding: 0;}
    p {background-color: #EFE; border: 1px solid green;}
    </style>
    </head>
    <body>
    <div style="background-color: #FEE; border: 1px solid red; ">div</div>
    <div style="background-color: #EEF; /*border: 1px solid blue;/*">
    <p>paragraph</p>
    </div>
    </body>
    HTML:
    Borders cancel collapsing margins. If you uncomment the border in the outer div above, you will see how this div sticks to the top one (you will also see its background).

    J.D.
     
    J.D., Oct 26, 2005 IP
  4. balkanboy

    balkanboy Banned

    Messages:
    1,950
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    0
    #4
    By looking to this solution I see that it's replacement for box model hack. I didn't know I need to hack divs for bottom borders. Thanks.
     
    balkanboy, Oct 27, 2005 IP