I am studying CSS and something just doesnt seem right to me. There seems to be no apparent difference between using PX or EM for font-size. I've created an HTML with two Ps one using EM and the other PX. When I resize the browser's window both paragraphs resize exactly the same way. When zooming in and also everything resizes properly. So please explain it to me :D
I've even created an JS fiddle with blocks of different font-sizes both in EMs and PX. Here it is, try it out. http://jsfiddle.net/5m0nyfq8/embedded/result/
<div id="root">
<span>ROOT EM font-size: 1.25em;</span>ac
<p class="em">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>ROOT PX font-size: 24px;</span>
<p class="px">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<div id="first">
<span>FIRST EM font-size: 0.9em;</span>
<p class="em">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>FIRST PX font-size: 18px;</span>
<p class="px">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<div id="secondwithinfirst">
<span>SECONDWITHINFIRST EM font-size: 0.88888888em; </span>
<p class="em">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>SECONDWITHINFIRST PX font-size: 16px; </span>
<p class="px">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
</div> <!-- End Second Div -->
</div> <!-- End First Div -->
</div> <!-- End Root Div -->
<span>OUTSIDEROOT1 EM font-size: 1.5em;</span>
<p class="outsideroot1em">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>OUTSIDEROOT1 PX font-size: 24px;</span>
<p class="outsideroot1px">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>OUTSIDEROOT2 EM font-size: 1.875em;</span>
<p class="outsideroot2em">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
<span>OUTSIDEROOT2 PX font-size: 30px</span>
<p class="outsideroot2px">In hac habitasse platea dictumst. Mauris eu tortor porttitor, gravida metus non, venenatis eros. Maecenas scelerisque pulvinar lacus vitae scelerisque. Etiam porta sapien id ante consequat ullamcorper. Maecenas iaculis cursus ornare. Pellentesque vitae nibh nec velit tincidunt porttitor quis vitae erat. Duis eu risus lorem. Praesent convallis dui feugiat eros porta, vitae porta nisl lobortis. Duis eu nunc ultricies, pharetra velit eget, gravida nulla.</p>
body { background-color: #222; color: white; font-size: 1em;}
span { display: block; background-color: #840000; color: white; padding: 10px;}
#root { font-size: 1.25em; /* 20px */}
#root .px {font-size: 20px;}
#first {font-size: 0.9em; /* 18px */}
#first .px {font-size: 18px;}
#secondwithinfirst { font-size: 0.88888888em; /* 16px */ }
#secondwithinfirst .px { font-size: 16px;}
.outsideroot1em { font-size: 1.5em; /* 24px */}
.outsideroot1px { font-size: 24px;}
.outsideroot2em { font-size: 1.875em; /* 30px */}
.outsideroot2px { font-size: 30px;}
