Padding / margins. PX or EM?

Discussion in 'HTML' started by Mike Barnard, Mar 20, 2008.

  1. Mike Barnard

    Mike Barnard Guest

    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, Mar 20, 2008
    #1
    1. Advertising

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

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

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Mar 20, 2008
    #2
    1. Advertising

  3. Mike Barnard

    Bergamot Guest

    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
     
    Bergamot, Mar 20, 2008
    #3
  4. Beauregard T. Shagnasty wrote:

    > 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/
     
    Toby A Inkster, Mar 20, 2008
    #4
  5. Mike Barnard

    Bergamot Guest

    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
     
    Bergamot, Mar 20, 2008
    #5
  6. Mike Barnard

    C A Upsdell Guest

    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.
     
    C A Upsdell, Mar 20, 2008
    #6
  7. Mike Barnard

    Ben C Guest

    On 2008-03-20, Beauregard T. Shagnasty <> 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.
     
    Ben C, Mar 20, 2008
    #7
  8. Mike Barnard

    Mike Barnard Guest

    On Thu, 20 Mar 2008 11:04:25 +0000, 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.
    >
    >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.
     
    Mike Barnard, Mar 20, 2008
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Keith

    Setting margins on an ASP.NET page

    Keith, Nov 4, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    855
    Natty Gur
    Nov 4, 2003
  2. Chris D

    Re: Page Margins on an ASP.NET page

    Chris D, Nov 19, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    388
    Chris D
    Nov 19, 2003
  3. Bill Priess

    Re: Page Margins on an ASP.NET page

    Bill Priess, Nov 19, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    9,871
    Bill Priess
    Nov 19, 2003
  4. Andrew Crowe
    Replies:
    3
    Views:
    828
    Andrew Crowe
    Dec 13, 2003
  5. Michael Laplante

    Margins versus padding

    Michael Laplante, May 5, 2006, in forum: HTML
    Replies:
    12
    Views:
    835
    Michael Laplante
    May 5, 2006
Loading...

Share This Page