Padding / margins. PX or EM?

As heading. When using paddings I find myself using very small
figures, 3px and so on. I could use 0.2em or similar, but is it worth
it? Do you pad with px or em?

Thinks... padding with em means the padding gets bigger as the text
does, meaning less space for the now bigger text to fit in to. I
think it must remain at PX.

I've typed this now, so I'll post it anyway. Comments?

Mike.

Mike Barnard wrote:

As heading. When using paddings I find myself using very small
figures, 3px and so on. I could use 0.2em or similar, but is it worth
it? Do you pad with px or em?

I use px, em or %, depending on the context.

% is a good choice if you want widths to scale to the window size.
Larger windows will have more, smaller windows less.

Thinks... padding with em means the padding gets bigger as the text
does, meaning less space for the now bigger text to fit in to.

Agreed. I use a fairly large default text, combined with a usually
~800px wide window. When margins and/or padding are set in ems, it does
leave less space for actual content. Sometimes a lot less.

I
think it must remain at PX.

For padding, especially, you want enough to keep the content readable,
but it doesn't really have to scale with text size.

I suggest px or %.

--
Berg

Beauregard T. Shagnasty wrote:

If padding is in em units, it will
expand with text resizing. If in px units, it will not change, and the
text will spill out of the box.

Not everything needs to scale to the user's text size. Margins and
padding especially.

A 20px left/right padding would keep a good amount of white space
between the block edge and text. This is independent of content width,
and there is no reason why it needs to change with the visitor's text size.

Generally, use px only for borders, and image sizing. Use em for
everything else.

I disagree. % can be a better choice than em in a lot of cases.

--
Berg

Mike Barnard wrote:

As heading. When using paddings I find myself using very small
figures, 3px and so on. I could use 0.2em or similar, but is it worth
it? Do you pad with px or em?

Thinks... padding with em means the padding gets bigger as the text
does, meaning less space for the now bigger text to fit in to. I
think it must remain at PX.

One thing to consider is that I have observed that using fractions of em
or ex units can result in inconsistencies. E.g., if I specify a border
that is 0.15ex thick, the actual thickness in pixels may vary depending
on which side of the box the browser draws the border. For large
fractions of em or ex units, this hardly matters, but for small
fractions it can look very odd.

On 2008-03-20, Beauregard T. Shagnasty <a.nony.mous (AT) example (DOT) invalid> wrote:

Mike Barnard wrote:

As heading. When using paddings I find myself using very small
figures, 3px and so on. I could use 0.2em or similar, but is it
worth it? Do you pad with px or em?

Thinks... padding with em means the padding gets bigger as the text
does, meaning less space for the now bigger text to fit in to. I
think it must remain at PX.

Methinks you have it backwards there. If padding is in em units, it will
expand with text resizing. If in px units, it will not change, and the
text will spill out of the box.

The text won't spill out unless you set the width or height in px.
You'll just get a constant thickness padding around it.

On Thu, 20 Mar 2008 11:04:25 +0000, Mike Barnard
<m.barnard.trousers (AT) thunderin (DOT) co.uk> wrote:

As heading. When using paddings I find myself using very small
figures, 3px and so on. I could use 0.2em or similar, but is it worth
it? Do you pad with px or em?

Thinks... padding with em means the padding gets bigger as the text
does, meaning less space for the now bigger text to fit in to. I
think it must remain at PX.

I've typed this now, so I'll post it anyway. Comments?

Mike.

My wrist aches. Too long at the keyboard!

Thanks to you all. Sometimes I forget I have percentages as another
option. In trying to get nicely fluid left and right columns I was
using em at one point and when the text was increased (quite a long
way) the center content was a vertical column of characters with a big
white space next to it.

Oh well. Thanks again.