Forum Moderators: not2easy
If we can figure out the exact rules then I'll post the code for a minimal test case. It seems way too simple of a bug to survive to Opera 9.5, Gecko 1.9, IE7, and Safari 3.
The general setup is as so...
<div id="...">
<h1>...</h1>
<div id="...">
<p>
The paragraph has a top margin of 10 pixels. The perceived correct behavior would apply the margin to the paragraph pushing it 10 pixels from the top of it's containing divisible element. However all the browsers I tested push paragraph's parent divisible element 10 pixels from the header.
- John
If this is not the case where in the W3C is this specified?
I'm not sure if this is or is not the case, but its an issue that routinely causes me headaches, so I'm subscribing to this thread
And to pay my way, here's what might be a relevant link:
- John
If I'm not mistaken this is Collapsing Margins [w3.org] that you're describing
It is correct behaviour..
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
to help translate, what is most likely happening is that the top margin of the <p> is adjoining the top margin of its parent <div> because there is no border or padding separating them wrt box model.
box example:
margin divborder divpadding divmargin pborder ppadding p
actual:
margin divmargin pborder ppadding p
The two margins (red) combine and the actual margin given is the larger of the two, if the background to everything were transparent, you would not 'see' any difference. This is most often undesired when a visual effect is added, i.e. backgrounds are required and the visual appearance is that of a gap (margin being on 'wrong' element)
There are good reasons for collapsing margins, but from a design/visual perspective the easy way to solve is to add 1px padding or border to parent element, in order to stop the adjoining.
-Suzy
- John
Can you by any chance please come up with any example that actually justifies such a behavior?
as it happens, yes ;)
Collapsing Margins are very much misunderstood IMHO,
what we need to remember that CSS is a method to add extra visual style to a page. Think about 'normalised' text, like a book/newspaper and then also remember that any web author has always had to contend with a default "stylesheet" else any page of text without the default styles applied would "run-in"!
Heading 1
paragraph
paragraph
Heading 2
paragraph
paragraphetc..
Imagine for sake of argument that the headings have a default top/bottom margin of 50px and the paragraphs have defaults of 10px, what would you want the gap between the heading and paragraph to be, or how about between the actual paragraphs?
without collapsing - the first case, between heading/para would mean a margin of 60px, the second between para/para would be 20px.
If that's what we had to deal with you could obviously add classes and do some maths to tweak the CSS to simulate the collapsing, to make the spacing proportionate.
With default collapsing those gaps are 50px and 10px respectively, i.e. exactly what is says on the tin, and just as is the norm in every day reading, proportionally spaced no matter whether they're first middle or last paragraph on the page
Browsers have always had to have some sort of default behaviour in order to provide a "normalised" text page, they provide us with 'new line spacing' as opposed nothing without using <br> as that is how typed text (as opposed to markup) should be! They collapse the margins, per the recommendations, because otherwise the gaps between differing elements would be disproportionate. - The 'default' unit of margin is usually em's, which actually adds emphasis to the word 'proportion'
The first reasoning is for side by side elements: with nested elements it has to be the same? Does the reader care whether there is a parent div on the paragraph they are reading (in naked text form)? They can't see it, it's not adding anything to the page so I highly doubt it. As stated previously, and like your OP example, the collapsing should still take place or else we wouldn't be able to use generic identifying elements in the markup without again adding extra styling in order to combat the natural behaviour
In other words, if you get back to basics and remove your own CSS from a page, how does it layout/read? - This default behaviour gives me respect for the native state, and means web authors do not have to do any maths (e.g. halving margins), or know any CSS in order to get a regular looking page of text.
I agree on the surface that's it seems counter intuitive at times, but that's when we're at the stage of wanting nice visual designs which need to meet up perfectly, however once at that stage we then can at least apply a simple 1px addition to the elements where it suits us instead of adding a class name and different CSS e.g. to every first paragraph..
If you then notice from the above links recs page - margins between floated boxes/other boxes and absolutely positioned box/other boxes DO NOT collapse, this, to me anyway, also makes sense - as once we're doing either of those we are coming out of the "native" state and making very definite visual adjustments to the page layout.
thoughts welcome..
edit reason: grammar in first paragraph and spelling all over!
[edited by: SuzyUK at 12:04 pm (utc) on Dec. 19, 2007]
it's the getting them to remain separate (add together) which isn't standard hence the 1px buffer workaround
- John
If I wanted that spacing I'd add it to the header or to the paragraph. No "special" zone has been created, it's just a margin when the margins of all the elements have been set to 0!
Not sure I understand that :o what do you mean by a "special" zone?
As designers we usually approach things with a visual first so is there a visual example available explaining why margins in their normal behavior apparently aren't useful enough?
again I may have picked this up wrongly, but this is margins in their normal behaviour which to my mind makes them useful for both text authors and designers purposes, when we use CSS we "manipulate" default style properties to achieve a result, that is all you're having to do here.
As designers we usually approach things with a visual first so is there a visual example available explaining why margins in their normal behavior apparently aren't useful enough?
There are many visual examples of what happens, though it's hard to "see" margins - but the explanation, as always with W3C recommendations, has a lot to with the interpretation, and then there are other points to consider i.e.how one particular section of the recs reacts with all the others. The few discussions I found, round and about, tend to talk in terms of what they are rather than why - as I said I think they're misunderstood :)
-Suzy
If there a following element then the margin is calculated. But if the following element also has a margin, which one to use? Presumably someone long long ago took the decision not to combine them but to use the larger.
You can see bottom margins being ignored if you create a simple page with a single coloured div with a height greater than the screen, and style it with a margin. The div will extend to the bottom of the window, or sometimes a little above. If you then add something after the div (say a single word of text) then the margin has its correct dimension.
I suspect that the W3C recommendations are written to comply with the way most browsers calculate margins.
So you're guessing that browsers set standards, not the W3C?
If I have a page with no body padding (incorrectly referenced as margin) and create a 2000px tall divisible element giving it an 8px bottom margin I expect to see the eight pixels of margin below the divisible element.
I was going to agree with you that no margins may need to be set if there are no elements below the bottom element however using pure liquid CSS it's important to decide if I'm going to use the body's padding (no and not just because browsers get it wrong) or the bottom element's bottom margin. So not trying to be unpleasant, I'm just not seeing any valid use for this still.
Collapsing Margins are very much misunderstood IMHO
Suzy, who exactly had the idea of messing up margins from their normal behavior? I am really trying to understand it but it makes absolutely no sense because in all the situations provided I already know how to get the desired layout to pixel perfection by using the normal rules.
- John
Maybe this is one of those rare cases where it was simply the right choice from the get go... it's there, we are able to deal with it .. is there a right or wrong here?
Suzy, who exactly had the idea of messing up margins from their normal behavior?
ermm collapsing margins (thread topic?) is their normal behaviour, I'm still not seeing what you're getting at with this "messing up" bit John, what's messed up?
I am really trying to understand it but it makes absolutely no sense because in all the situations provided I already know how to get the desired layout to pixel perfection by using the normal rules.
Yep.. you know because you know a bit of CSS and how to use it gain control of a situation, but the default browser behaviour came first you can't just write that off because you don't understand it
To understand default (i.e. clean with no CSS applied) browser behaviour wrt markup, I still maintain you should write (markup) a page with NO CUSTOM CSS! and then, if that is legible, turn that into a pixel perfect design with no class names.
I would guess that just about anyone can do that when it's applied to a singular vision (or media), but CSS, afaik, was never meant to only provide a pixel perfect or DTP design platform for one single site or set of rules?
[edited by: SuzyUK at 1:18 am (utc) on Dec. 22, 2007]
I'm still not convinced (though need to read this more in-depth). It essentially says this: you have multiple paragraphs with a top and a bottom header, when you add those top and bottom headers you'll get the larger value as the total. So if I am understanding this correctly: 4+5!=9, instead 4+5=5. Is it me or something not adding up here?
- John
A bottom margin defined for element A is telling the browser to place element B that number of pixels lower than element A. A top margin defined for element B is telling the browser exactly the same thing. So if both margins are specified, 5px + 5px cancel out to become 5px. But with 5px + 7px the 5px's cancel out and we have 5px + 2px = 7px.
So you're guessing that browsers set standards, not the W3C?
Definitely. W3C produces recommendations, but industry sets the de-facto standards. Usually they coincide because W3C has to take account of current browser technology.
If I have a page with no body padding (incorrectly referenced as margin) and create a 2000px tall divisible element giving it an 8px bottom margin I expect to see the eight pixels of margin below the divisible element
You may expect to see it, but you won't!
So if I am understanding this correctly: 4+5!=9, instead 4+5=5. Is it me or something not adding up here?
Yep that is correct!
It's not that they're not adding up, but that they are combining or perhaps a better description would be that they are overlapping, in a sliding door kind of way - (never thought collapsing was a particularly good term ;))
I see HarryM and I are both using the word combine, but perhaps with different meanings? sorry if I'm adding to the confusion here so just to clarify - I DO NOT mean 'add together' when I use it.. I mean it more that they unite/overlap/compound to form the whole :o
If there a following element then the margin is calculated. But if the following element also has a margin, which one to use? Presumably someone long long ago took the decision not to combine them but to use the larger.
>>which one to use? - I don't see it as a choice maybe they still do apply both but one gets 'hidden' - If there is bottom margin on one element AND a top margin on the following one then the browsers assign both margins in accordance with the rules and put the space BETWEEN the two elements' border edges [w3.org] - like you say Harry, margin is only applied if there is an preceding/following element to space it from
- in other words the area used by the margin for both elements is a shared space. So if it's the same value margin that is applied to both elements the space needed between the border edges of both elements is the same so the two margin areas overlap exactly giving the appearance that only one has been applied, if one of the margins is larger it means the smaller one has been overlapped completely giving the appearance that it's not there.
