tutorialstonight logo
A Platform To Learn To Code

CSS UNITS



BOX

CSS has several measurement units for length and size.These measuring units are used to specify non-zero value to the CSS properties.

CSS units are used where we need to define size of length. EX - height,width,border-size,padding,font-size etc.

CSS unit values are specified by a number value followed by a unit and there should be no space between number and unit.
Ex :-

  • height: 25 px; is WRONG WAY there should be no space between value and unit
  • height: 25px; is RIGHT WAY

There are two type of length unit:

  1. Absolute unit
  2. Relative unit



1).Absolute unit

The absolute length unit is of fixed length.It shows exactly specified size on any screen.

Device to device screen size varies so absolute length units are not recomended.It is dependent on output medium.It can be used when the desired output is known.

These are absolute units with their description:

Units Description
cm 1cm = 1 centimeter (standard length unit)
mm 1mm(millimeter) = 1/10 centimeter
in 1in(inch) = 2.54 centimeter
pt 1pt(point) = 1/72 inch (0.3527mm)
px 1px(pixel) = 0.75pt
pc 1pc(picas) = 12pt

Example

Run the code

2).Relative unit

Relative unit length specifies length according to another length property.It is flexible with device to device and better to use in different size devices.It changes with different rendering medium.

Units Description
em It is relative to the current font size of the element.1em means same size of font 2em means 2 times of current font-size.
ex It is relative to current x-height of font.
vh It is related to height of viewport.1vh=1% of height of viewport.
vw It is related to width of viewport.1vh=1% of width of viewport.
% It is relative to the font size of the parent element.

Example

Run the code

Output:

This paragraph has 2 times its regular font.

This box has 60% width of the viewport. Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus impedit architecto, possimus, similique nisi unde autem aspernatur ea id sequi sed ducimus quod. Modi, iure. Hic consequatur aliquid odio totam.



BOX

BOX