Difference between PX, EM and Percent

Nishtha Thakur

Answered on 8th Jun, 2018

The px unit defines a measurement in screen pixels. The following is an example:

div {
   padding: 40px;
}

The em unit is a relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.

The following is an example:

p {
   letter-spacing: 4em;
}

The % unit defines a measurement as a percentage relative to another value, typically an enclosing element.

p {
   font-size: 14pt;
   line-height: 80%;
}