Heights of static block elements

According to calculating the height of block non-replaced static elements
(the corrected version):

If it has block-level children, it is the distance from the top
border-edge of the topmost block-level child box, to the bottom
border-edge of the bottommost block-level child box. However, if the
element has a non-zero top padding and/or top border, then the content
starts at the top margin edge of the topmost child. Similarly, if the
element has a non-zero bottom padding and/or bottom border, then the
content ends at the bottom margin edge of the bottommost child.

Only children in the normal flow are taken into account (i.e., floating
boxes and absolutely positioned boxes are ignored, and relatively
positioned boxes are considered without their offset). Note that the child
box may be an anonymous box.

There are a number of problems with this:
1. the term 'block-level' should not be used except in the context of
elements (see 9.2.1) - 'block boxes' should be used to refer to block
boxes. Confusion of the terms causes problems; e.g., implying that clear
on inline floats (which are block boxes, but inline-level elements).

So better is:

If it has block child boxes, it is the distance from the top border edge
of the topmost block child box to the bottom border edge of the bottommost
block child box. However, if the element has a non-zero top padding and/or
top border, the content starts at the top margin edge of the topmost
child. Similarly, if the element has a non-zero bottom padding and/or
bottom border, the content ends at the bottom margin edge of the
bottommost child.

In addition, the following case does not seem to be correctly described:

<div style="padding-top: 200px; background: red">
<p style="margin-top: -300px; height: 50px">
</div>
Since the element has a non-zero top padding, the content starts at the
top margin edge of the topmost child. The top margin edge is 100 pixels
above the top of the DIV. This means that the top content edge of the DIV
is 300 pixels above its padding edge. This is wrong.

Furthermore, since the bottom of the element is the bottom border edge of
the bottommost child box, the bottom of the DIV is therefore 50 pixels
below that. This is also wrong - if we measure from the topmost child box
to the bottommost child box, we get a height of 50 pixels for the DIV, but
surely the negative margin-top should nullify this (i.e., since the bottom
of the bottommost child box is above the top of the DIV it could hardly
affect it).

Thus remove the 'distance from' and 'content starts at' (which contradict
each other - 'distance from' implies that you measure from x (which need
not be the padding-top of the containing element) to y, but apply it below
the padding-top, whereas 'content starts at' implies that the content is
considered to start at the padding-top of the containing element), and
instead have:

If it has block child boxes, the height is from the top padding edge of
the element to the bottom border edge of the bottommost block child box
(if this distance is negative, the height is 0). However, if the element
has a non-zero bottom padding and/or bottom border, the content ends at
the bottom margin edge of the bottommost child (again, if this distance is
negative, the height is 0).


=====
----------------------------------------------------------
From Matthew Brealey (http://members.tripod.co.uk/lawnet (for law)or http://members.tripod.co.uk/lawnet/WEBFRAME.HTM (for CSS))
__________________________________________________
Do You Yahoo!?
Talk to your friends online with Yahoo! Messenger.
http://im.yahoo.com

Received on Wednesday, 16 February 2000 09:56:25 UTC