Feb 3
Unfortunately, the oft-quoted Sitepoint article on this subject makes quite a garble out of it.
1. Collapsed Margins.According to the w3c, margins of different elements may overlap.
Two <p>'s, each with a margin above and below of ten pixels, would only have ten pixels total between them.
While there are technically two separate 10px margins, they both occupy the same space.In the example below, the (blue) margins are the same above, below, and between the elements. <p>Hello</p>
<p>World</p>
To the best of my knowledge, there are no exceptions to this rule, and it works consistently cross browser.
While I would not have opted for this, it is logical, consistent, and well documented.2. Free MarginsThe margins of an inner element are not contained by an outer one.
Inner margins will just break right through and keep other elements away from the parent, while the parent wraps tightly around the child.Imagine a <p> with a margin of 10px that is inside a <div>.
The <div> will wrap the <p> tightly on top and bottom, but the <p>'s margin will keep any other element from coming close.In the example, The div has NO margins of its own. The (blue) margin of the <p> is seen outside the <div>. The solid lines represent the borders of the div and the p (which are in the same place vertically).
<div>
<p>Hello world</p>
</div>
Exceptions to this rule abound. For starters, this only applies to the vertical margins, and not the horizontal ones.
Furthermore, any one of the following CSS rules in the parent will prevent this behavior, even where these rules are the default.
There is absolutely no logic for this behavior, though it is all there in the spec.
The abundance of exceptions make it difficult to get this right, and none of these exceptions actually have any reason for changing the behavior as it does. I'd bet money that this was a bug in one of the earlier browsers and was included in the spec for the sake of backwards compatibility.
For consistency, I am entirely against it and recommend using whatever is convenient to have the margin bound in place. However, it does happen, and it is more or less consistent cross browser (with the exception of the haslayout and inherit bits). Plan accordingly.
3. Putting the two together:When the parent and the child each have a margin, the inner margin breaks free - right into the space of the outer margin..
Obviously, when two adjacent elements and their children all have margins, there will be quite some overlap.Ah, don't we love CSS?!
Collapsed Margins and Free Margins
Two of the less well known attributes of margins that happen often enough.Unfortunately, the oft-quoted Sitepoint article on this subject makes quite a garble out of it.
1. Collapsed Margins.According to the w3c, margins of different elements may overlap.
Two <p>'s, each with a margin above and below of ten pixels, would only have ten pixels total between them.
While there are technically two separate 10px margins, they both occupy the same space.In the example below, the (blue) margins are the same above, below, and between the elements. <p>Hello</p>
<p>World</p>
Hello
World
While I would not have opted for this, it is logical, consistent, and well documented.2. Free MarginsThe margins of an inner element are not contained by an outer one.
Inner margins will just break right through and keep other elements away from the parent, while the parent wraps tightly around the child.Imagine a <p> with a margin of 10px that is inside a <div>.
The <div> will wrap the <p> tightly on top and bottom, but the <p>'s margin will keep any other element from coming close.In the example, The div has NO margins of its own. The (blue) margin of the <p> is seen outside the <div>. The solid lines represent the borders of the div and the p (which are in the same place vertically).
<div>
<p>Hello world</p>
</div>
Hello world
Exceptions to this rule abound. For starters, this only applies to the vertical margins, and not the horizontal ones.
Furthermore, any one of the following CSS rules in the parent will prevent this behavior, even where these rules are the default.
- overflow: [auto, scroll, hidden, inherit (non-IE)] ;
- border: [solid];
- padding: [1px];
- position:absolute;
- display:inline-block;
- float: [left,right];
- zoom:1 - In IE, anything that sets haslayout to true.
- If the parent is the <body> element.
There is absolutely no logic for this behavior, though it is all there in the spec.
The abundance of exceptions make it difficult to get this right, and none of these exceptions actually have any reason for changing the behavior as it does. I'd bet money that this was a bug in one of the earlier browsers and was included in the spec for the sake of backwards compatibility.
For consistency, I am entirely against it and recommend using whatever is convenient to have the margin bound in place. However, it does happen, and it is more or less consistent cross browser (with the exception of the haslayout and inherit bits). Plan accordingly.
3. Putting the two together:When the parent and the child each have a margin, the inner margin breaks free - right into the space of the outer margin..
Obviously, when two adjacent elements and their children all have margins, there will be quite some overlap.Ah, don't we love CSS?!
