em and rem

"em" and "rem" units

em and rem are units of measurement which take their measurements based on or relative to its immediate parent element

For example, if the "<div>" tag has a font-size attribute in CSS as 12px. and if it contains as an element whose font-size is 1.2em it means that the font-size of the element is 1.2 times the font-size of its parent. Thus, the font-size of the child html element will be 1.2*12 = 14.4px rem is relative to the root element size i.e. html tag size suppose the default size of the html page elements which are not styled by CSS is 14 px then if we specify that the font-sizee be 1.2rem it means the font size will be 14*1.2 =16.8px
They are mainly used for creating thumbnails or different sizes of the same image
For example, Consider the following piece of code:
img:hover {width: 2em;}
will scale the image horizontally to double its width when you hover over it

Comments

Popular posts from this blog

XPath for HTML markup

Apache Hadoop | Running MapReduce Jobs

Laravel | PHP | Basics | Part 2