On Jan 10, 2006, at 9:39 AM, Torp wrote:
> Without css a <p> gets a blank line before and after
> 1) even when there is an image
> 2) except when the <p> is on top.
> But when changing the margins with css, these two behaviours are gone.
> Is there a workaround for this?
The reason (1) and (2) happen is because, with most browsers, there's
a default style rule that behaves like this:
p { margin: 1em 0; }
So <p> will always have a single line-height margin on top and on
bottom, regardless of contents (images, texts, input elements,
whatever).
If "the <p> is on top", I'm not sure exactly what you mean by this.
On top of what?
My best guess is that you mean on top of another <p>. In this case,
the vertical margins collapse, which means that the space between the
two <p> tags (or any other elements with vertical margins) will be
the greater of the two margins, not the sum of the two margins. For
two unstyled <p> tags, that means there will only be 1em of space
between them, not 2em (as it would be if you added the margins).
As for workarounds, I'm not exactly sure what you're trying to
accomplish. The effects you describe are margins -- but you want to
apply different margins?
If you want to preserve this exactly behavior, make sure that your
vertical margins are 1em. You can set the horizontal margins to
whatever else you want.
I hope that helps. Send out a clarification of the effect you're
trying to achieve (or a link), and I'll try to do a better job of
explaining it :)
--
Matthew Levine (http://www.infocraft.com/)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
