Sent by Jukka K. Korpela on 7 August 2004 07:07
On Fri, 6 Aug 2004, Aryan N. wrote:
> By default tags like <p> or <li> have a pre-set padding.
The formulation is in exact, to a significant degree. First, _elements_
have properties; tags do not exist in CSS, they are just notations used in
a markup language to delimit elements and assign attributes to them.
Second, the word "default" is risky in CSS contexts, since it is used in
different meanings. The initial value for padding is 0 by CSS
specifications. Browsers' default style sheets may specify other values,
and in _that_ sen elements like p or li _may_ have a nonzero default
padding. This is browser-dependent.
But they don't, in any browser that I know of. For _margin_ properties,
the situation is different. Browsers's default style sheets typically set
a top and bottom margin for p elements - but not for li elements (this
can be seent as reflecting the idea that list items are short and list
appearance should hence be compact, so if you have a list with long items,
you probably want to set some margins between them). The value of that
margin typically corresponds to the line height (e.g., it is set
to 1.2em if the body element's line-height is set to 1.2), thus creating a
margin that corresponds one line of text.
> I would like
> to know is there a way to overwrite those default setting.
Naturally, using quite normal CSS constructs, such as
p { margin: 0; text-indent: 1.5em; }
if you wish to remove the margins completely and use first line indent
instead (to separate paragraphs visually).
> Because 0
> padding or 0 margin doesn't really effect those tags.
Setting padding: 0 for p or li elements hardly has any effect, though you
might do so if you wish (some browsers _might_ set some nonzero padding
for them in their default style sheets).
Setting margin: 0 for li probably has no effect either.
But margin: 0 for p normally has a considerable effect. If the situation
looks different, then you probably see the effect of an adjacent element's
margin. For example,
<h2>foo</h2><p style="margin:0">bar</p>
still creates (on most browsers) a considerable vertical space between the
heading and the paragraph text, due to the bottom margin of h2.
> Is there a way
> to set a negative padding and/or margin?
The values of padding properties must be nonnegative, by CSS
specifications. For margin properties, negative values are permitted, but
there can be browser-specific limitations and, moreover, the net effect
(of margin collapse) might not always be what you expect.
But setting negative margins should normally be the last resort.
It is better to think positively, or at least nonnegatively:
instead of setting an element's top margin -1em to compensate for
an adjacent element's 1em bottom margin in order to remove all vertical
spacing between them, set both of those margins to zero.
For example, in my simple case above, if you tried setting
<p style="margin-top: -1em">, this might work on sunny days for lucky
users, but it's a shot in the dark - you would be compensating for the
h2 element's bottom margin without actually knowing (just guessing)
its value.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
