pixels, rem, em

<html> has default font size ok 16px. 1em=16px 

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).


.text-section{

    font-sze: 1.5em; }        /* its parent element is <html> which have default size 16px.                                            so its font size will be 1.5*16=24px*/

.text-section div{                /* Its parent element is .text-section whose parent is                 font-size:1.5em               <html>. so, it will inherit both parents font size. so,                 margin-top: 2em;           1.5*1.5*16=48px and for margin top:                                                                      16*1.5*1.5*2 */

 .text-section div{

    font-size:20px                   /* use of font size 20px will disable inheritance from their 

    margin-top: 2em; }                parent elements. so, margin top will be 20px*2em=40}


When rem is used, it is gonna look only at <html> fontsize.

.text-section{

    font-sze: 1.5em; }        /* its parent element is <html> which have default size 16px.                                            so its font size will be 1.5*16=24px*/

.text-section div{                /* it will inherit font size of <html> only. so font size= 

    font-size:1.5em; }             1.5*16=24px*/

 .text-section div{

    font-size:20px                   

    margin-top: 2em; }         /* 24px */

Comments

Post a Comment

Popular posts from this blog

python

 functions  default parameter: def add(a,b=0):     c=a+b     return c x=add(3) print(x) in the above code, if no value for b is given, value of b becomes 0 by default json files import json x={"name":"samit, "age":20,"job":"eng"} y=json.dumps(x)               #converts dictionary to json print(y)
Read more

flutter

  import   'package:flutter/material.dart' ; void   main () {    runApp ( MaterialApp ( debugShowCheckedModeBanner :  false ,  home :  Hi ())); } class   Hi   extends   StatelessWidget  {    @ override    Widget   build ( BuildContext   context ) {      return   Scaffold (        appBar :  AppBar (          centerTitle :  true ,          title :  Text ( "My first App" ),          backgroundColor :  Colors . red [ 700 ],       ),        body :  Column (          children : [            Center (       ...
Read more