Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 2163 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Use of the 'em' unit?

Thread title: Use of the 'em' unit?
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
09-04-2005, 05:02 PM
#1
Yang is offline Yang
Yang's Avatar
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 460
iTrader: 0 / 0%
 

Yang is on a distinguished road

Send a message via Yahoo to Yang

  Old  Use of the 'em' unit?

Hey, can anyone tell me how the 'em' unit works in HTML/CSS?

For example:
Code:
img {
margin: 0;
padding: 0.4 em;
}

Thanks.

09-05-2005, 02:29 AM
#2
Cheyne is offline Cheyne
Cheyne's Avatar
Status: Member
Join date: Mar 2005
Location:
Expertise:
Software:
 
Posts: 473
iTrader: 0 / 0%
 

Cheyne is on a distinguished road

  Old

an 'em' the length of a capital M, it is used so there is a spacing unit relevant to the text size.

So in this case, the padding of the image will be 0.4 % of the width of the letter M in whatever text size has been set.

09-05-2005, 04:09 AM
#3
flez is offline flez
Status: I love this place
Join date: Jul 2004
Location: Montreal
Expertise:
Software:
 
Posts: 540
iTrader: 0 / 0%
 

flez is on a distinguished road

  Old

In other words, don't use it for layout if you want a static design. And when the text size is at normal, I think it's 16px or around that, just to get an idea.

09-05-2005, 04:45 AM
#4
derek lapp is offline derek lapp
Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:
 
Posts: 2,246
iTrader: 0 / 0%
 

derek lapp is on a distinguished road

  Old

or resize the text size, so 1em is a useable size.

09-05-2005, 10:02 AM
#5
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

Originally Posted by Cheyne
... the padding of the image will be 0.4 % of the width of the letter M ...
In this case, it's actually 40% (0.4). Just to avoid any confusion.

09-05-2005, 01:02 PM
#6
Yang is offline Yang
Yang's Avatar
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 460
iTrader: 0 / 0%
 

Yang is on a distinguished road

Send a message via Yahoo to Yang

  Old

Thanks everyone

09-06-2005, 07:13 AM
#7
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

dumbcoder, make sure you don't have a space between 0.4 and em like you have above, it should always have no gap between the two.

09-07-2005, 01:14 PM
#8
moped is offline moped
moped's Avatar
Status: Junior Member
Join date: Jun 2005
Location: Kansas
Expertise:
Software:
 
Posts: 44
iTrader: 0 / 0%
 

moped is on a distinguished road

  Old

Personally, I think it best to use points or pixels rather than ems.

09-07-2005, 03:13 PM
#9
Bennett is offline Bennett
Status: Narassist
Join date: May 2005
Location: USA
Expertise:
Software:
 
Posts: 4,469
iTrader: 32 / 100%
 

Bennett is on a distinguished road

Send a message via MSN to Bennett

  Old

pixels is more exact when working with small changes

09-08-2005, 07:50 AM
#10
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

moped and bennett, pixels and points are too restrictive when you are designing for accessibility. Em gives the text fluidity, which people with poor eyesight need, so they enlarge the text.

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed