px, em, and rem are units of measurement used in web development to define the size of elements such as text, margins, padding, and other layout properties. Here’s the difference between them:
Pixels (px):
- The pixel is an absolute unit of measurement and is the most commonly used unit.
- 1 pixel represents a single dot on a screen.
- The size remains constant regardless of the element’s context or the size of the parent element.
- Pixels are not scalable, meaning that if the user zooms in or out, the size will not adjust proportionally.
Example: Suppose you set a heading’s font size to 24px. It will always appear as 24 pixels tall, regardless of the screen size or the container it is placed in.
Relative units:
Relative units are used to create more flexible and scalable designs that adapt to different screen sizes and contexts. They adjust based on the surrounding elements.
a. EM (em):
- The em unit is relative to the font size of the parent element.
- 1em is equal to the current font size of the element.
- If you set the font size of the parent element to 16px, and then set a child element’s font size to 2em, it will be calculated as 2 times the parent’s font size (2 * 16px = 32px).
Example: Let’s say you have a paragraph with a font size of 16px, and inside that paragraph, you have a span with a font size of 1.5em. If the parent paragraph’s font size is 16px, the span’s font size will be 1.5 times the parent’s font size, resulting in 24px (16px * 1.5 = 24px).
b. REM (rem):
- The rem unit is relative to the root (html) element’s font size, providing a consistent baseline across the entire document.
- It is similar to em, but instead of being relative to the parent element, it’s relative to the root element.
- The root element’s font size is typically set to a default value (e.g., 16px).
- If you set the root element’s font size to 16px and then set an element’s font size to 2rem, it will be calculated as 2 times the root’s font size (2 * 16px = 32px).
Example: If the root (html) element’s font size is set to 16px, and you have a heading with a font size of 2rem, it will be calculated as 2 times the root’s font size, resulting in 32px (16px * 2 = 32px).
<div class="container">
<h1>Heading</h1>
<p>Paragraph with <span>some text</span>.</p>
</div>
.container {
font-size: 16px;
}
h1 {
font-size: 24px; /* Using pixels (px) */
margin-bottom: 1em; /* Using em */
}
p {
font-size: 1.5rem; /* Using rem */
}
span {
font-size: 1.2em; /* Using em */
}