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
px
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.
vh and 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
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
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
dvh stands for ‘dynamic viewport height’, and it dynamically switches between the lvh and svh properties depending on controls visibility.
