Stylesheets - collapsing margins in css 2.1

Author

collapsing margins in css 2.1

2005-10-24, 3:14 am

Hi,

I'm looking for clarification of css 2.1 specification in section 8.3.1
"Collapsing Margins"

The 6th bullet reads "If the top and bottom margins of a box are
adjoining ..."
I won't paste the whole point here, its too long.

But, from this first line does this mean that the element has empty
content, no border, and no padding? Further on in the same point its
mentioned that :

"An element that has had clearance applied to it never collapses its
top margin with its parent block's bottom margin" ... what is this
reffering to? how could it happen that a top margin of a child aligns
with the bottom margin of its parent?

Sorry, I'm somewhat new to learning CSS and haven't found a very
detailed book on newer aspects in CSS 2.1 so I'm really struggling to
understand all the fine points. Is there any clearer explanation of
these specifications? It seems to me that a text description is almost
impossible to understand at times.

Spartanicus

2005-10-24, 6:23 am

"yb" <bajwa_yasir@yahoo.ca> wrote:

>I'm looking for clarification of css 2.1 specification in section 8.3.1
>"Collapsing Margins"
>
>The 6th bullet reads "If the top and bottom margins of a box are
>adjoining ..."
>I won't paste the whole point here, its too long.
>
>But, from this first line does this mean that the element has empty
>content, no border, and no padding?

Zero height, no border and no padding, it may have content. A practical
example of such a box could be a div containing only a floated element.

>Further on in the same point its
>mentioned that :
>
>"An element that has had clearance applied to it never collapses its
>top margin with its parent block's bottom margin" ... what is this
>reffering to? how could it happen that a top margin of a child aligns
>with the bottom margin of its parent?

IIRC CSS margins collapse when they are adjacent, this can lead to
ridiculous situations described by the quoted paragraph, i.e. a child's
top margin being adjacent to it's parent's bottom margin.

>Sorry, I'm somewhat new to learning CSS and haven't found a very
>detailed book on newer aspects in CSS 2.1 so I'm really struggling to
>understand all the fine points. Is there any clearer explanation of
>these specifications? It seems to me that a text description is almost
>impossible to understand at times.

CSS float and collapsing margin rules are ridiculously complex, as a
result browser implementations are wildly inconsistent. Combined, the
resulting difficulties are a common cause of frustration for content
authors.

Many of the authoring problems with floats and collapsing margins are
the result of inappropriate usage of floats, like creating IE compatible
"CSS layouts". Floats used appropriately are less of a headache.

--
Spartanicus