How much is 1em and 100%?

Q: How much is 1em and 100%?


A: em and % are relative units, unlike pixels, meters and inches. If you would say something is 10cm high or 100px wide… everybody knows how high or wide that is…
If you would say in CSS something is 2 em high… then you need a reference. That's why it's not absolute but relative. The reference is the font-size of the containing box or container. So if you define in your body{} that font-size:16px then the following is true:

1em = 100% from 16px = 16px
1.5em = 150% from 16px = 24px
0.5em = 50% from 16px = 8px
0.01em = 13% from 16px = 1px

This is invented to scale a website without doing too much damage to the layout. As you may know, some browsers such as Internet Explorer or Firefox allow you to scale a web page larger or smaller by holding down your CTRL key and rolling your mouse wheel or using the keyboard and hitting CTRL + or CTRL -. Use CTRL 0 (zero, not "oh") to reset the size to default.

If your site is defined in em's then everything scales nicely together and your layout stays intact.

The unit % does the same, but it is relative to the measurement of the containing box or container. Therefore, if you define (for example) #side-bar{ width: 30% }, then the width of the #side-bar will be relative to its containing box (which is in usually #content-wrap). So 30%=30% of the width of your #content-wrap container.

[[div style="border:2px solid #0259BA;"]]
[[div style="background-color:#0B7DFD;width:100%; color:#fff;"]]
width 100%
[[/div]]
[[div style="background-color:#0B7DFD;width:75%; color:#fff;"]]
width 75%
[[/div]]
[[div style="background-color:#0B7DFD;width:50%; color:#fff;"]]
width 50%
[[/div]]
[[div style="background-color:#0B7DFD;width:25%; color:#fff;"]]
width 25%
[[/div]]
[[/div]]

width 100%

width 75%

width 50%

width 25%

A cool link:

Calculator to convert px to em: don't forget to set your base (fontsize) in the tab "settings"… remember em = relative!

If you found this info useful rate it up and hit "+"

rating: +2+x




This is not a <HTML>-CSS reference base. For that we direct you to other excellent places on the web: CSS-tutorials via Google

Thanks for the input to
_solved
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License