DEV Community

ABHAY TIWARI
ABHAY TIWARI

Posted on

size units in CSS

Every property used in CSS has a value type defining the set of values that are allowed for that property. similiarly CSS has list of permissible size units that are used according to our purpose.
there are two types of size units used in css.

1). Fixed size
2). Relative size

fixed size units are those size units which can not change themselves according to screen sizes. for example cm(centimetres) , mm(mili-metres), Q(quater mili-metres), in(inches),pc(picas),pt(points),px(pixel).
px or pixel are most commonly used units in CSS size description.

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

em-Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.

** ex-**x-height of the element's font.

** ch-**The advance measure (width) of the glyph "0" of the element's font.

rem-Font size of the root element.

lh Line height of the element.
rlh Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value.
vw 1% of the viewport's width.
vh 1% of the viewport's height.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.
vb 1% of the size of the initial containing block in the direction of the root element's block axis.
vi 1% of the size of the initial containing block in the direction of the root element's inline axis.
svw, svh 1% of the small viewport's width and height, respectively.
lvw, lvh 1% of the large viewport's width and height, respectively.
dvw, dvh 1% of the dynamic viewport's width and height, respectively.
~ mdn web docs

Discussion (0)