Relative Units in CSS

Percentage (%)

Definition: The percentage (%) is a relative unit that is based on the parent element’s size. It can be used for various properties such as width, height, margin, padding, font-size, and more.

Use Case: Percentage is particularly useful when creating flexible layouts that need to scale with the size of the parent container or viewport.

Example

.container {
    width: 80%; /* 80% of the parent container's width */
    height: 50%; /* 50% of the parent container's height */
}

.text {
    font-size: 150%; /* 150% of the parent element's font size */
} 

Em (em)

Definition: The em unit is based on the font size of the parent element. If the parent element has a font size of 16px, 1em will equal 16px. However, em can also compound when nested within other elements, inheriting the font size of its ancestor elements.

Use Case: Em is most commonly used for font-sizing but can be applied to other properties such as width, height, margin, padding, and more. It allows for scalable typography and layout sizes.

Example

.container {
    font-size: 16px; /* Base font size */
}

.text {
    font-size: 2em; /* 2 times the container's font size, i.e., 32px */
    margin-top: 1.5em; /* 1.5 times the container's font size, i.e., 24px */
}

Rem (rem)

Definition: The rem unit stands for “root em.” It is relative to the font size of the root element (), which is typically 16px by default in most browsers. Unlike em, which is based on the parent element’s font size, rem provides a more consistent and predictable result as it always refers to the root.

Use Case: Rem is perfect for consistent typography and layout sizes across a website, as it does not compound like em.

Example

html {
    font-size: 16px; /* 1rem = 16px */
}

.container {
    font-size: 1.5rem; /* 1.5 times the root font size, i.e., 24px */
}

.text {
    font-size: 2rem; /* 2 times the root font size, i.e., 32px */
}

Viewport Width (vw)

Definition: The vw unit is based on the viewport width, which is the visible area of the web page on the screen. 1vw is equal to 1% of the viewport’s width.

Use Case: It can be used to create responsive layouts where the elements should scale based on the width of the viewport, resulting in a more fluid design across different screen sizes.

.container {
    width: 50vw; /* 50% of the viewport's width */
    height: 30vw; /* 30% of the viewport's width */
}

.text {
    font-size: 5vw; /* Font size based on the viewport width */
} 

Viewport Height (vh)

Definition: The vh unit is based on the viewport height, which is the visible area of the web page on the screen. 1vh is equal to 1% of the viewport’s height.

Use Case: Similar to vw, it is perfect for creating full-screen sections or making elements scale based on the height of the viewport.

.full-screen {
    height: 100vh; /* Full viewport height */
}

.banner {
    height: 50vh; /* 50% of the viewport's height */
}