The unit "em" is defined as the value of font-size for a given font. In terms of height, it is the height of a given font in terms of a point. For instance, if the size of an element is 20 pixels, then the value of 1 em will be "20 pixels".
From the time of traditional typography like metal type blocks and printing presses, the "em" unit is traditionally defined as the width of the capital M in the current typeface and point size. Hence, em units are always dependent on the font-size of the parent element.
The pixel or PX is also known as the "Magic unit of length" in CSS. If you look closely at your monitor screen, it seems broken into a grid of tiny little boxes, known as pixels.
Pixels are used as perfect measurement units for the size of the images, which are already a certain number of pixels tall and wide. For instance, a font-size of 20 px will be 20 pixels, no matter which device is being used. Using pixels for the font-size seems quite interesting, but it is not recommended for accessibility, as it changes the base font-size by zooming in the image.
For the traditional typographic measurements, points abbreviated as "pt", an Absolute length unit is used. This unit has been used by printers or typesetters and word-processing programs for many years.
Traditionally, there are 72 points for an inch. So, the capital letters of the text to 12 points should be 6 inches tall.
Rem stands for the "root em", representing the font-size of the root element (<html>) of a document. Unlike em, rem is constant for all the elements of a document. Rem is supported by many browsers.