Inconsistent padding... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Nicole -> Inconsistent padding... (5/15/2006 18:06:37)

This isn't really a question so to speak, but I've been using ems instead of pixels to set padding, margins etc where possible.

I had a 3 paragraphs with 3 headings, both the <p> and <h2> tags had:

padding: 0 0 0 1em;

and oddly, the heading was ever so slightly more "indented" than the paragraph. Upon changing both of them to:

padding: 0 0 0 16px;

both the headings and paragraphs line up exactly.

Shouldn't they do this anyway?

Nicole



Tailslide -> RE: Inconsistent padding... (5/15/2006 18:18:14)

Far as I know - ems is relative to the font-size you're using- a heading would have a bigger font-size and would therefore 1em would be bigger than for a paragraph with smaller font.

You could try using % if you prefered - but I'd say that if you're using a fixed layout then stick to px for margins/padding.

Don't quote me on this but I seem to remember reading somewhere of a Guru's technique concerning this where they use % for horizontal margins and ems for vertical - which would get around this problem.

If you particularly want to use ems for padding/margins then apply them to the div rather than the stuff inside them - but watch out for box model issues if you do that.



Nicole -> RE: Inconsistent padding... (5/15/2006 18:22:38)

Thanks for the explanation Tail.

It's fixed anyway, but I'm not sure if I really understand. I thought 16px was equal to 1em, 8px was equal to 0.5em etc. which would mean that it shouldn't be relative to the heading or paragraph text size?

Yes I'm applying them to both instead of the div for this reason. It was in both FF and IE btw.

Nicole



Tailslide -> RE: Inconsistent padding... (5/15/2006 18:39:45)

Assuming that you've stuck to 100% font size (which you probably haven't - but it's easier to explain) then your paragraph text would be 16px in IE (different in other browsers). So 1em padding applied to that paragraph would move the paragraph inwards the same amount as if you applied 16px padding.

The heading for instance might be equivalent to 24px for instance. So applying 1em padding to the heading would mean the same as applying a padding of 24px to it - thus moving it further in.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.03125