Which unit should be used in web design to define space (margin, padding, etc.)?

Question

In the CSS of a website is it better, for human readability, define margin and padding units in px, em or pt?

Answer 1

Is white space difficult to read when specified as pixels?

An EM is a variable unit and is useful when you want to scale something based upon the (variable) size of something else. It is common when specifying type to set the line height relative to the type size and this is what EMs are for. 10pt with 1em line height is classic 10/10 or "solid" type, and 1.2em (or 120%) and 2em are probably the 2 most common line heights.

For CSS, ems are useful when you want to set type in a container and want the container to scale up or down if one later changes the type size. This means that one only needs to set the type size in one location and everything else cascades from there (it is an ease of editing feature). It is up to the designer to decide if scaling up the box is a good idea (or if it will break the design, should the box get too large). edit: there is also the problem of client-side letter scaling, so ems have a use with respect to accessibility.

Regarding pt and px, since pt is an inches measurement and inches do not really exist in the computer monitor context, I tend to use px.

In summation: ems are a useful variable unit for ease of design, and have no bearing on readability.

Answer 2

Margins and padding for text (p, h1, h2, etc.) should always be defined in ems if your text is defined in ems, so they stay proportional as the user scales text up and down. Even if you spec your text in px, ems are good units for padding and margins, because the user can still override the basic text size.

The rest of the layout's m+p should be in px if you have a fixed-width layout, ems if it's % or em based ("liquid" or "elastic"). These shouldn't normally affect readability, unless column widths are allowed to become so narrow that there's only one word per line, or something similar.

To maintain proportionality and best appearance, margins around an image that's floated in text is best defined in ems, otherwise images look terrifically cramped when text is scaled up (or lonely and unloved in the rare case that it's scaled down).

Answer 3

It doesn't really matter what unit of measure you choose as long as your consistant throughout.

em measures depend on the fixed size of a parent element and can change. On the other hand you can always rely on px to control your layout.

Users should be able to modify to some degree but you don't have to turn over too much control to them.

For text I like to set defaults then increase or decrease depending on the use.

body {  /* I actually eliminated the body tag from my layouts since switching to HTML5 */
font:12px/100%;
}
.content p {
font-size: 1.1em;
}

For fixed width layouts use px for structure and em for padding and margins around text.