Table of contents
Introduction
In CSS (Cascading Style Sheets), there are different types of units used to specify measurements and dimensions for various CSS properties. Here are some commonly used units in CSS:
Pixels (px): The pixel is a fixed-size unit that represents a single dot on a display screen. It is commonly used for specifying exact dimensions for elements.
Percentages (%): The percentage unit represents a relative measurement based on the size of the parent element. For example, setting a width of 50% on an element means it will take up half of the width of its parent element.
Em (em): The em unit is relative to the font size of the parent element in typography. It is commonly used for specifying sizes or spacing related to text.
In case of properties like width it is set to the font size of the same element .
It has snowball effect hence not used that much
Rem (rem): The rem unit is similar to the em unit but is relative to the root element (typically the parent). It provides a consistent sizing reference, as it is not affected by the font-size of parent elements.
Viewport Units (vw, vh, vmin, vmax): These units are relative to the size of the viewport (the browser window or the containing element). "vw" represents 1% of the viewport width, "vh" represents 1% of the viewport height, "vmin" is the smaller of vw and vh, and "vmax" is the larger of vw and vh. They are useful for creating responsive designs.
Absolute Units (e.g., cm, mm, in, pt, pc): CSS also supports absolute units that are based on physical measurements. However, these units are less commonly used in web development as they do not scale well across different devices and screens.
These are some of the most commonly used units in CSS. Depending on the CSS property and the specific use case, different units may be more appropriate.