8 replies [Last post]
torvad
Offline
Regular
Last seen: 8 years 51 weeks ago
Joined: 2005-11-01
Posts: 36
Points: 0

What are the advantages/disadvantages with setting width and margins and padding in px, em and %? Is there any css-rules for this? I can see that if you set the width in px there will be a problem if you change the resolution.

What about em? What is 1em actually? If you got a container that contains all the content for the page, and you don't want it to cover the whole viewport. Is it better to set the height and width in em, px or %?

T:)

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 11 weeks 23 hours ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Difference between em, % and px

an EM is the square of the font-size.

Verschwindende wrote:
  • CSS doesn't make pies

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Difference between em, % and px

:?

As per w3c, css2.1 spec an em is

w3c wrote:
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

torvad
Offline
Regular
Last seen: 8 years 51 weeks ago
Joined: 2005-11-01
Posts: 36
Points: 0

Difference between em, % and px

Thanks. I thought it had something to do with the font-size. But which font-size is this corresponding to?

torvad
Offline
Regular
Last seen: 8 years 51 weeks ago
Joined: 2005-11-01
Posts: 36
Points: 0

Difference between em, % and px

Width and height of containers, is that normal to set in %? If for instance the content of a page should have width and height 80% of the viewport, is it normal to set this in % or in em?

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 5 years 32 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Difference between em, % and px

Quote:
But which font-size is this corresponding to?

You can't get much clearer than what Chris posted. Smile

Chris..S wrote:
As per w3c, css2.1 spec an em is

w3c wrote:
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

Quote:
Width and height of containers, is that normal to set in %? If for instance the content of a page should have width and height 80% of the viewport, is it normal to set this in % or in em?

For width and height of a container or content, pixel units or percentages would be best to stay relevant to the resolution size. I have seen them defined with em, but I don't think it is always best. I tend to use em more for padding and margins.

- r

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Difference between em, % and px

For which to use where and when. To a large extent that is a choice dependent on developer style. I am sure different people here could give their very good reasons for preferring one style over another and (mostly) no way is wrong.

These are my reasons.

Try to keep the units as relevant to the element as possible. By that I mean if the element is particularly related to an image, size it in pixels. If the element is particularly related to text, size it in ems.

Be aware of the effect of user changes on your elements and how that effects unit choice. The user may change the font-size. That can have a big effect on elements that contain text which are sized in pixels - e.g. that neat tabbed horizontal menu sized at 60px x 20px. Similarly changes in font-size and browser width can have a big effect on the width of columns set in ems or %.

Be careful when mixing dimension units, e.g. 2 columns 45% wide, with 0.5em padding, 1px border and 10px margins. The 10% left after the columns needs to fit the ~70px of padding, margins and borders. Which means the page will fail when the container width falls below 700px, higher if the user increases the font-size.

Personally, I try to use ems for widths, padding & margins as much as possible. If the font-size changes the spacing needs to change too to keep the same proportional look.

torvad
Offline
Regular
Last seen: 8 years 51 weeks ago
Joined: 2005-11-01
Posts: 36
Points: 0

Difference between em, % and px

Thanks for god answers!!
For me it seems like setting a margin in em works different in IE then in FF. It seems like em is bigger in IE. Is the default font-size different?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Difference between em, % and px

FF and IE round calculations to whole pixels slightly differently. However, (iirc) both FF/Win and IE6/Win should default to a font-size of 16px. User browser settings can change this.