Skip to main content

CSS Units

CSS (Cascading Style Sheets) has several units for specifying measurements, such as length, size, and positioning.

Here are the most commonly used CSS units:

  • px (pixel): This is a fixed unit of measurement that represents a single dot on a screen. It is commonly used for defining font sizes and border widths.

  • % (percentage): This unit represents a percentage of the parent element's size. It is commonly used for defining width and height of elements.

  • em: This unit represents the font size of the parent element. It is commonly used for defining font sizes and spacing.

  • rem: This unit represents the font size of the root element (i.e., the <html> element). It is similar to em but provides a more predictable behavior for nested elements.

  • vw/vh: These units represent a percentage of the viewport width or height. They are commonly used for defining responsive layouts.

  • pt (point): This is a fixed unit of measurement that represents 1/72 of an inch. It is commonly used for printing and PDF documents.

  1. cm/mm/in: These units represent centimeters, millimeters, and inches, respectively. They are commonly used for defining print layouts.

  • ch: This unit represents the width of the "0" (zero) character in the current font. It is commonly used for defining fixed-width elements, such as tables or forms.

  • ex: This unit represents the height of the "x" character in the current font. It is similar to ch but provides a more predictable behavior for nested elements.

tip

By understanding the different CSS units and how they are used, you can create flexible and responsive layouts that adapt to different screen sizes and devices.

Absolute Lengths​

Absolute lengths are CSS units that are fixed and do not change their size based on the user's device or settings.

Here are the names of the most commonly used absolute length units in CSS:

  • px (pixels)
  • in (inches)
  • cm (centimeters)
  • mm (millimeters)
  • pt (points)
  • pc (picas)

Relative Lengths​

Relative lengths are CSS units that are based on the size of other elements. These units allow you to create layouts that are more flexible and responsive to different screen sizes and device resolutions.

Here are the names of the most commonly used relative length units in CSS:

  • em
  • rem
  • % (percentage)
  • vw (viewport width)
  • vh (viewport height)
  • vmin (viewport minimum)
  • vmax (viewport maximum)