Adsense-HeaderAd-Script


Advertisement #Header

13 Jul 2015

What is the difference between em and rem in CSS


Both em and rem  are used to create dynamic design html pages so that it can adapt to different device size formats like for smartphone, tablets, laptops, or very large screen desktops.
Both em and rem is derived from the computed font-size value of the element. And if no font-size is derived from that element or inherited from parent elements, then the default font-size value of the browser is taken (usally 16px).

Eg:

?
01
02
03
04
05
06
.d01 {font-size: 40px; height:2em;}
.d02 {font-size: 20px; height:2em;}
.bord-v {border:solid 7px violet;   text-align:center}
.bord-i {border:solid 6px indigo;   text-align:center}
.d01 {font-size: 40px; height:2em;}
.d02 {font-size: 20px; height:2em;}


.bord-v {border:solid 7px violet;   text-align:center}
.bord-i {border:solid 6px indigo;   text-align:center}
?
07
08
09
10
<div class="d01 bord-v">
    <div class="d02 bord-i">TEST d02
    </div>
</div>



TEST d02

At element d02


Now derived font-size = 20px
Computed Height = 40px

If class .d02 doesn't exist, then it inherits from .d01


Now  derived font-size = 40px
Computed height = 80px 

If both class .d02 & .d01 doesn't exist, then it inherits from default browser


Now  derived font-size = 16px
Computed height = 32px

Why rem ?

em has a issue, it gets multiplied for each inner elements or cascaded elements, but rem is based on the root font-size and  so doesn't have cascaded effect.

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
TEST html 'em','rem'
<head>
    <style>
        html {font-size:6.25%}
        body {font-size:14em}
        .d1 {font-size:2em}
        .d2 {font-size:2em}
        .d3 {font-size:2em}
        .d4 {font-size:2em}
         
        .bord-v {border:solid 7px violet;   text-align:center}
        .bord-i {border:solid 6px indigo;   text-align:center}
        .bord-b {border:solid 5px blue;     text-align:center}
        .bord-g {border:solid 4px green;    text-align:center}
        .bord-y {border:solid 3px yellow;   text-align:center}
        .bord-o {border:solid 2px orange;   text-align:center}
        .bord-r {border:solid 1px red;      text-align:center}
    </style>
</head>
<body><br>TEST body
<div class="d1 bord-v">TEST d1
    <div class="d2 bord-i">TEST d2
        <div class="d3 bord-b">TEST d3
            <div class="d4 bord-g">TEST d4</div>
        </div>
    </div>
</div>
</body>
</html>


TEST html 'em','rem'

    


TEST body


TEST d1 
    

TEST d2 
        

TEST d3 
            

TEST d4

Output for em



Output for rem



2 comments:

  1. Anonymous23 July 2015 at 10:45

    Have you ever thought about writing an e-book or guest authoring on other websites?
    I have a blog based upon on the same subjects you discuss and would really like to habe you
    share some stories/information. I know my audience would appreciate your work.
    If you are even remotely interested, feel free to shoot
    me an email.

    Here is my blog post web page []

    ReplyDelete
  2. Anonymous5 August 2015 at 16:45

    This comment has been removed by a blog administrator.

    ReplyDelete

Subscribe to: Post Comments (Atom)