Padding / margins. PX or EM?

M

Mike Barnard

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.
 
B

Beauregard T. Shagnasty

Mike said:
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.

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

Bergamot

Mike said:
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 %.
 
T

Toby A Inkster

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

There are other occasional acceptable uses for pixel sizing -- such as
setting the max-width of, say, a caption to the width of the image above/
below it.

Percentages are also useful for many things.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 2 days, 14:15.]

The Semantic Web
http://tobyinkster.co.uk/blog/2008/03/09/sw/
 
B

Bergamot

Beauregard said:
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.
 
C

C A Upsdell

Mike said:
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.
 
B

Ben C

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.
 
M

Mike Barnard

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top