SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How do I fix margin problem

    HTML Code:
    <style>
    	div { background: orange; }
    	h1 { background: red; }
    </style>
    
    <div style='background:green; height: 10px;'></div>
    <div>
    	<h1>Test</h1>
    </div>
    You can see by this, that the margin of the h1 protudes outside the div wrapper and separates it from the div above. How can I fix this so that the two divs are touching? Shouldn't the margin of the h1 behave exactly the same as if it's wrapper had a padding rather than passing the margin onto it's wrapper?

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <style type="text/css">
    	div { background: orange; }
    	h1 { background: red; margin: 0;}
    </style>
    
    <div style='background:green; height: 10px;'></div>
    <div>
    	<h1>Test</h1>
    </div>
    The margin is the problem but you should also add the type attribute to your style tag

    I presume this is just a demo but you should apply the style to your CSS as apposed directly to the <div> and you're also conflicting styles with background colours which isn't doing any harm but is uneccesary.

    Also, you may need to specify font-size: 0; on the div with the height of 10px as IE6 and below has a bug which won't allow an element to be displayed at less height than it's font-size;

    Hope that solves the problem

  3. #3
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response,

    Yes this was just to illustrate the problem, this behaviour occurs regardless of those changes, as the live version is not like this one. They are actually dynamic content, so the height is not an issue in that I have no idea what the height will be nor can i specify h1 to have no margin since it is content that a user will be filling in.

    This problem is consistent in firefox and ie6.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I quite understand the problem. If you have control over the CSS then why can't you specify the following?

    Code:
    h1 { margin: 0; }
    Or maybe the problem is being caused by the default padding's or margin's on other elements?

    Of course, if you're not using lots of forms you could always use the global reset method at the top of your CSS which will set padding and margin's on all elements to zero.

    Code:
    * { padding: 0; margin: 0; }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Shouldn't the margin of the h1 behave exactly the same as if it's wrapper had a padding rather than passing the margin onto it's wrapper?
    No it shouldn't

    This is the exact behavior that margins should have as described in the specifications and it is called "collapsing Margins". Every author should know about collapsing margins as it has a direct effect on the way that elements are rendered.

    Margins on vertically adjacent elements or nested elements that have touching edges. (i.e. no padding or borders separate them) will collapse their margin into one margin. Effectively the margin collapses onto the parent and becomes the parents margin instead.

    Floated elements or elements with overflow do not collapse their margins (nor do inline-block or absolute elements). IE6 also won't collapse margins if the element has "haslayout" (but doesn't adhere to overflow's non collapsing behaviour).

    In you example a mixture of overflow and "haslayout" will fix the problem.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    div { background: orange;overflow:auto }
    * html div{height:1&#37;}
        h1 { background: red;margin:1em 0}
    </style>
    </head>
    <body>
    <div style='background:green; height: 10px;overflow:hidden'></div>
    <div>
        <h1>Test</h1>
    </div>
    </body>
    </html>
    Overflow may not be the best choice and in those circumstances simply adding 1px of padding to the elements concerned will stop the collapse.

    Although margin collapse may at first be unintuitive it does have its good points also.

    See here for more info.

  6. #6
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    nested elements that have touching edges.
    I knew about collapsing margins for vertically adjacent elemnts, did not know that it affected nested elements with touching edges.

    Thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •