Measuring units help to specify size and distances for properties of HTML elements like width, height, font size, margins, and padding. There are several measuring units in CSS that help define sizes. Many of them are the commonly used units like px, %, etc. In addition, we have many new units you may not know about! They greatly help in creating responsive layouts. Let us go through this next-level tutorial to learn about the latest measuring units you can use for different elements.
Commonly Used Measuring Units
The most common measuring unit in CSS. It comes under the category of absolute units, i.e. it is irrespective or not related to any other property. 1 pixel / px represents one dot on a screen or 1/96th of an inch. Therefore, any value in px will always give a fixed size, irrespective of a device’s resolution. This is not suited for responsive layouts.
em / rem
em is the measuring unit that are relative to their parent element. For example, if a parent element has a font size of
6px, a child element with a font size of
4em means its font is
24px, i.e. quadruple the size of the parent element. rem works in a similar way, but depends on the root of the document instead of the parent element.
% is relative to the parent element. So whenever you set the width of an element as 25%, it means it will occupy 25% of the width of its parent element.
For example, if the parent div is a device screen of width
400px, an inner div with 90% width will occupy (400 * 0.90) 360px of the device width. This unit is well suited for multiple screen sizes and helps in a responsive website layout.
vh / vw
vh is called ‘view height’ where 1 vh corresponds to 1% of a viewport’s height. For example, if a div has a height of
10vh, it will occupy 10% of the viewport’s height, i.e. for a browser window of 1100 pixels high, the div height will be 110 pixels.
vw is called ‘view width’ where
1vw corresponds to 1% of a viewport’s width. For example, if a div has a width of
30vw, and occupies
30% of the viewport’s width. So, for a browser window of
400px wide, the div will occupy
120px of width.
vw units work similar to the percentage units, However, each is exclusive for height and width respectively.
New Measuring Units
The vh or ‘viewport height’ may not work as efficiently in mobile devices. 100vh will give a max viewable height. However, when mobile controls like an address bar is viewable in a mobile device, the height overflows. Let’s look at some new css properties you may not know that can solve the ‘overflow’ issue.
svh stands for ‘small viewport height’, and corresponds to 1% of the height of the visible area when mobile device controls like an address bar are in view.
lvh stands for ‘large viewport height’, and corresponds to 1% of the height of the visible area when mobile device controls like an address bar are not in view.
dvh stands for ‘dynamic viewport height’, and it dynamically switches between the lvh and svh properties depending on controls visibility.