Re: [CSS21] 3 margin-collapse issues?

On Mon, 23 Aug 2004, [ISO-8859-1] Staffan Måhlén wrote:
> >
> > Table cells don't have margins, so they can't be adjoining to 
> > anything, and if they're not adjoining to anything, they don't 
> > collapse.
>
> Ah, but of course. I assume that ensures that it is clear that children 
> do not collapse with their unexisting margins like in the td 
> first-child/last-child quirk (which BTW doesnt quite work with nested 
> collapses does it?)?

In that there is nothing in the spec that says that this should happen, 
and in so far as the behaviour is fully-defined, yes.


> > > It also seems to miss specifying what happens with vertical overflow 
> > > and bottom-margin. It does specify that collapse with bottom margin 
> > > and children does not occur if "underflow" occurs, but not that it 
> > > doesn't when overflow happens which seems to be the interpretation 
> > > of some major current implementations and also makes more sense than 
> > > collapsing something that isen't adjoining.
> > 
> > When overflow happens, the margins aren't adjoining. This is defined.
> 
> Hmm, i still don't quite see that. Could you spell that out to me? 
> 
> I think you are referring to the section:
>
> "The bottom margin of an in-flow block-level element with a 'height' of 
> 'auto' and 'min- height' less than the element's used height is 
> adjoining to its last in-flow block-level child's bottom margin if the 
> element has no bottom padding or border."
>
> but i don't see how that works and i don't see any 'max-height' references.

The "element's used height" is dependent on the max-height property, 
which is where the max-height reference comes in.

But yes, that's the section to which I was referring. It basically says 
that an element's bottom margin is only adjoining to its parent's bottom 
margin if it is auto-sized and that sized did not get affected by max- 
height/min-height.


> > > The paragraphs: 
> > >
> > > "If the element's margins are collapsed with its parent's top margin, 
> > > the top border edge of the box is defined to be the same as the 
> > > parent's. Otherwise, either the element's parent is not taking part in 
> > > the margin collapsing, or only the parent's bottom margin is involved. 
> > > The position of the element's top border edge is the same as it would 
> > > have been if the element had a non-zero top border."
> > > 
> > > does not seem to match exactly what current browsers do. Why have two 
> > > ways to position the element and why isn't the box always positioned 
> > > after the collapse? To me it seems weird that the elements content area 
> > > can start above where its margins participates in a collapse, but 
> > > otherwise i think most implementations seem to go with some version of 
> > > the second solution above? This case is however probably the defintion 
> > > of an edge case,
> > 
> > The case above is only relevant when the top and bottom margins of an 
> > element collapse together. If it wasn't for those paragraph, there would 
> > be no defined top border content edge for that element, and nested floats 
> > or positioned elements would be at a loss as to where to go.
> > 
> > The two definitions are needed because otherwise you end up with 
> > unintuitive results.
> 
> I'm sorry but i don't understand that having those two definitions gives 
> more intuitive results, and it seems that Mozilla 1.7, Opera 7.50 and IE6 
> disagree so much on this behavior that i cannot make sense of what 
> that point is. Are there any use cases that can make me understand 
> or is this more about ensuring the behavior is reasonably well defined? 

There are basically two cases. Assume the following stylesheet:

   p, div { margin: 1em; }
   span { float: left; }
   div { background: blue; }

The first case:

   <p> A </p>
   <div>
    <p>
     <span> B </span>
    </p>
    <p> C </p>
   </div>

Here IMHO you want the top of the float to be at the top of the div, 
wherever that is.

The second case:

   <div>
    <p> A </p>
    <p>
     <span> B </span>
    </p>
    <p> C </p>
   </div>

Here IMHO you want the float to be at the same place as it would have been 
if the middle <p> element contained text.

The text in the spec now obtains those results.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'