CSS units are used to specify measurements in Cascading Style Sheets (CSS) to define the size, position, and spacing of elements on a web page. There are various types of units available in CSS, each serving a specific purpose. Here are some of the commonly used CSS units:
Absolute Units:
Pixels (px): Pixels are the most common unit in CSS. They provide a fixed-size measurement relative to the screen's resolution.
Points (pt): Points are commonly used for print media. One point is equal to 1/72nd of an inch.
Inches (in): Inches represent physical inches on the screen or paper.
Centimeters (cm): Centimeters are used to specify physical measurements in CSS.
Relative Units:
Percent (%): Percentages are relative to the parent element. For example, setting a width of 50% means the element will take up half of its parent's width.
Viewport Height (vh) and Viewport Width (vw): These units are relative to the viewport's height and width, respectively. 1vh is equal to 1% of the viewport height, and 1vw is equal to 1% of the viewport width.
Relative Font Size (em): The
emunit represents the font size of the element relative to its parent's font size. For example, settingfont-size: 1.2emmeans the font size is 1.2 times the parent's font size.Root Font Size (rem): Similar to
em, theremunit represents the font size relative to the root element (usually the<html>element). It allows you to create scalable designs across the entire page.