CSS Units

CSS Units | CSS Lengths | Absolute & Relative Units in CSS with Example Programs

by

We can use units like em, rem, pixel, and percentages to set the length, paddings, margins, align elements, and so on. We use those CSS units every day in our life. Go with this tutorial and gain proper knowledge about CSS Units with example codes. Let’s press the below links and directly jump into the units related stuff in CSS.

What are CSS Units?

CSS maintains a number of measurements contain absolute units like inches, centimeters, points, and so on, along with relative measures like percentages and em units.

Various CSS properties consider “length” values, such as width, margin, padding, font-size, etc. However, for some CSS properties, negative lengths are provided.

There are two types of lengths utilized in CSS — absolute and relative.

Absolute Lengths Units

Below the table of units is all absolute length units. These absolute length units are utilized when working on a project where responsiveness is not being viewed. The Absolute Units are the same size despite the parent element or window size. The absolute units are tabulated as follows:

Unit Name Equivalent to
cm Centimeters 1cm = 38px = 25/64in
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

Example:

p {
  font-size: 24px;
}
div {
  width: 3in;
  border-width: 3pt;
}

Relative units

  • em: Generally assigned to the element’s font size. It doesn’t depend on the fonts used rather the font size. In typography, this measures the width of the m letter.
  • rem: Similar to em but instead of font size, it varies current element font size. It uses the root element that is HTML. It has to be set once to make it consistent to all the pages.
  • ex: Same as em but instead of measuring the width of m letter, it measures the height of the letter x.
  • ch: Same as ex but instead of measuring the width of x letter, it measures the height of the letter 0.

Example:

div {
font-size: 16px;
}
div h3 {
font-size: 2rem;
}

Do Refer:

Pixels

This is the most used unit in CSS. But it is not that flexible as it depends on device pixel and DPI.

The pixel in units doesn’t have any similarity with the pixels in the device.

Percentages

Another important unit in CSS is a percentage as it can help us to compare some child elements to their parent element.

Example:

.parent-element {
  width: 100px;
}

.child-child {
  width: 50%; /* = 50px */
}

Viewport units

Viewport units are used to control the viewport i.e the area of the screen visible.

Like:

  • vw: Represents the width of the viewport. Like, 50vw = 50% of the width.
  • vh: Represents the height of the viewport. Like, 50vh = 50% of the height.
  • vmin: Represents the minimum between the height or width in terms of percentage. Like, 20vmin = 20% of the current width or height, depending on which one is smaller.
  • vmax: Represents the maximum between the height or width in terms of percentage. Like, 20vmin = 20% of the current width or height, depending on which one is bigger.

Fraction units

We mainly use fr units in the CSS grid for dividing the space into fractions.

CSS units: Time

A few of the properties like animation need values to display in time.

Unit Explanation
s It is the duration of time in seconds.
ms It is the duration of time in milliseconds.
1ms = 1/100 of a second

Example on Time CSS Units

<!DOCTYPE html>  
<html>  
<head>  
<style>   
div  
{  
width: 200px;  
height: 200px;  
background: red;  
border-radius: 50px;  
transition-property: background, width, height;  
transition-duration: 1s, 2s, 3s;  
}  
  
div:hover  
{  
width:300px;  
background: blue;  
height:300px;  
border-radius: 80px;  
}  
</style>  
</head>  
<body>  
<center>  
<h2>Hover to see effects.</h2>  
<div></div>  
</center>  
</body>  
</html>