DEV Community

ABHAY TIWARI
ABHAY TIWARI

Posted on • Updated on

Size Units in CSS

Length or Size units play very important role in defining the ammount of space a block of element takes on the screen. in Most forms of software designing we use generally two types of size units.

  1. Absolute or Fixed
  2. Relative

Absolute size units are generally used in only designing and printing of sample screen etc. they are not used in live projects because size of device screen vary so much and using them will make project ugly and not tempting to use but still they are used in basic builduing and small testing projects. while on the other hand Relative units varry according the device size and are directrly proportional to size of screen.
each size unit in css is written after a number of required size. i.e for example 2px,3cm,5mm,60vw,20vh etc. Note there is no space in between hose two (unit and number). we can omit the size unit if we wish to keep it zero.

we need size units in various properties of css. for example specifying the margins and padding,specifying font sizes,specifying border radius,specifying height and width of boxes etc.
below are some examples of fixed size units

/*length in centimetres*/
height: 10cm;
/* length in millimetres*/
height: 10mm;
/*length in inches a inch is equal to 2.54 cm */
height: 10in;
/*length in pixels a pixel is 1/96th part of inch*/
height: 10px;
/*length in points a point is 1/72 part of pixel*/
height: 10pt;
/*length in picas a pica is equal to 12 points*/
height: 10pc;
Enter fullscreen mode Exit fullscreen mode

Relative size units are given below that are most commonly used in CSS.
em -it is a size unit that compares it size from the size of current font element. 2em means twice,0.5em means half,0.25em means one fourth etc.
height: 0.5em;

Top comments (0)