[EMAIL PROTECTED] wrote:
>thx [David] - i realized that [removing margin/padding] was the solution too...
>
>still, i wonder why the floated p has 'different' padding + margin than the
>non-floated p, as the only difference between the p's is the 'float: right'
>??
>
>
Hi Francis,
I've the impression it is indeed only the "float"-difference: the
difference in handling margins between floats and normal flow.
In normal flow, margins are collapsing, but not in a floating element
(which isn't in the normal flow, so nothing to collapse).
The left (higher) image is in the normal flow, with a collapsing
margin-top (the p's are defined with {margin: 3px 0;} in respect to the
margin-bottom of the div with the borderline before it (with defined
{margin: 2px 0;}).
According to the css-rules [1], the distance between the left image and
the line above is 3px (before the line-height is starting).
The right img is the floating one: it's margin-top doesn't collapse, and
the distance between the right image and the line above is 2px + 3px
(before the line-height is starting).
Difference in height between left and right image is: 2px.
Checking with a screenshot, 200% enlarged in painting program: this
result
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-not-aligning-float.gif>.
I'm happy: it is confirming the difference is exactly 2px (4px
enlarged)! :-)
Greetings,
francky
[1]
"The resulting margin width is the maximum of the adjoining margin widths."
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
