How do I fix margin problem

**wonshikee** · Oct 15, 2007 15:39

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?

**DaveWoods** · Oct 15, 2007 15:43

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

**wonshikee** · Oct 15, 2007 15:51

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.

**DaveWoods** · Oct 16, 2007 00:44

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; }

**Paul O'B** · Oct 16, 2007 05:55

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.

**wonshikee** · Oct 16, 2007 07:07

Originally Posted by Paul O'B

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.

User Tag List

Thread: How do I fix margin problem

Thread Tools

Display

How do I fix margin problem

Bookmarks

Bookmarks

Posting Permissions