What is the difference between % and em?

Question

What is the difference between % and em length values? If containing elements'font-size is 10px, 1em = 10px and so is 100% = 10px. None of the answers in Stackoverflow answers this particular question.

Possible duplicate of [what is the difference between pixels and percentage in css?](http://stackoverflow.com/questions/19226439/what-is-the-difference-between-pixels-and-percentage-in-css) — aavrug, Dec 30 '16 at 06:13
read this link http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ — priya_singh, Dec 30 '16 at 06:14
the link does not explain the difference between em and % completely. — user7339197, Dec 30 '16 at 06:16
See http://stackoverflow.com/questions/132685/font-size-in-css-or-em — Chris Happy, Dec 30 '16 at 06:34
Possible duplicate of [What is the difference between px, em and ex?](http://stackoverflow.com/questions/2385829/what-is-the-difference-between-px-em-and-ex) — Madan Bhandari, Dec 30 '16 at 07:47
this question has been answered multiple times already, search before asking any question. If already answered questions doesn't help then ask question with details like what you are asking apart from other questions ? -- http://stackoverflow.com/help/searching — Madan Bhandari, Dec 30 '16 at 07:51

score 4 · Answer 1 · answered Dec 30 '16 at 06:36

4

em unit is dependent of font-size. It can be used for fit sizechanged/zoomed texts.

In the snippet below you can see difference:

let list = document.querySelectorAll('.fs');

let fs = 10;
setInterval(() => {
  if (fs > 36) fs = 10;
  list.forEach(el => el.style.fontSize = fs+'pt');
  fs += 1;
}, 100)

.em {
  width: 2em;
  background-color: cyan;
}
.perc {
  width: 10%;
  background-color: pink;
}

<div class="em fs">2em</div>
<div class="perc fs">10%</div>

answered Dec 30 '16 at 06:36

vp_arth

14,461
4
37
66

% is dependent on what? – user7339197 Dec 30 '16 at 06:46
on nearest parent `position:relative/absolute` container size. In my snippet it's `document.body` width – vp_arth Dec 30 '16 at 06:57

score 1 · Answer 2 · answered Dec 30 '16 at 06:32

1

em is a relative measure to the current font-size of the element in question. 1em is equal to the current font-size of the element in question.

If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

% however does not depend on any specific property. it's reference changes as you apply it on different properties.

See this example:

section{
  width:100%;
}
div{
  width:50px;
  height:50px;
  margin:0;
  padding:0;
}
.a{
  background-color:red;
}
.b{
  background-color:blue;
  width:2em;
}
.c{
  background-color:green;
  width:50%;
}

<section>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</section>

answered Dec 30 '16 at 06:32

ab29007

7,611
2
17
43

B=100px, A=?, C=? – user7339197 Dec 30 '16 at 06:40
`A=50px` `B=(2*16=32px)` `C= 50%of screen size` – ab29007 Dec 30 '16 at 06:46
since `100%=full size it can extend`, that is size of it's parent element – ab29007 Dec 30 '16 at 06:48
parent element of the `C` is the section which covers the full screen. so if screen width is 800px then width of `C` will be 400px – ab29007 Dec 30 '16 at 06:49
if section is 50% then B=(2*8=16px)? – user7339197 Dec 30 '16 at 06:52
because B is expressed in `em`. its reference is the font-size which is 16 px by default. – ab29007 Dec 30 '16 at 06:57
1

so in short `2em` is twice of it's font size but `200%` is twice of it's parent's size – ab29007 Dec 30 '16 at 06:59

What is the difference between % and em?

2 Answers2