CSS Measurement Unit

CSS offers a variety of measurement units for specifying different dimensions in style rules. These units can be absolute, such as pixels and points, or relative, such as percentages (%) and em units.

We need these values while specifying various measurements in our style rules e.g. border = "1px solid #999999". Here 1px specifies 1 pixel of the absolute unit in terms of the border.

Note: Style sheets that use relative units such as em or percentage (%) can more easily scale from one to another output environment.

Relative Length Unit

These units are useful for styling responsive sites because they scale relative to the window size or parent element. They specify a length that is relative to another length property.

When designing for devices with varying screen sizes, relative length units are ideal as they scale more effectively across different rendering mediums. Using relative units as the default for responsive designs can help avoid the need to update styles for different screen sizes.

Using em unit

A measurement of 1em is equal to the computed value of the font-size property of the element on which it is used. It can be used for vertical or horizontal measurement.

For example, if font size of the element set to 16px and line-height set to 2.5em then the calculated value of line-height in pixel is 2.5 x 16px = 40px.

Input:-

Output:-

The exception occurs when em is specified in the value of the font-size property itself, in that case, it refers to the font size of the parent element.

So, when we specify a font size in em, 1em is equal to the inherited font size. As such, font size: 1.2em; makes the text 1.2 times larger than the parent element's text.

Input:-

Output:-

The default size for the fonts in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting the body font-size to 62.5%, which resets the font size to 10px (62.5% of 16px). So, font size for the paragraph attribute is 2.5em (10 * 2.5 = 25px).

Using ex unit

The ex-unit is a relative measurement equal to the x-height of the current font. The x-height is named because it's often the height of the lowercase letter 'x' in a font. However, even fonts that don't have an 'x' contain an x-height, and the ex-unit is defined based on that height.

Absolute Length Unit

Absolute length units are fixed-length units, and they express length values as a specific size. They are not recommended for on-screen use because screen sizes vary widely. Absolute units are best used for print layouts, where the output medium is known.

Absolute units are less suitable for responsive sites because they do not scale when the screen size changes. These units are typically considered to be a fixed size and not subject to change.

Input:-

Output:-