Difference between PX, EM and Percent

How the measurement units px, em and percent different in CSS? I also want relevant examples to understand the difference.

1 Answer
Nishtha Thakur

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%;

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.