Image Size Units: PX, EM, REM, %, VW, and VH.

While working with Elementor and Neuron Themes, you might have encountered many times the sizing units like PX, EM, REM, %, VW, and VH, but what does each mean, and how you can use them to your advantage.

In CSS many properties like width, margin, padding, the font size will take length which is a combination of a number and a unit without whitespace. There are multiple units of measurements in CSS and here we have included PX, EM, REM, %, VW, and VH that will help you optimize your website's design. Note that not all units will be available on every option, only when there are needed to the most out of that option.

To give you a better understanding of these units you should know that there are two clear distinctions, you have absolute units and relative units.

Absolute Units

The Absolute length units are those who are fixed do not change according to the screen nor according to any element. In our case from the units available, pixels (PX) are an absolute unit. This means that the sizing of the element set in pixels will not change based on any element. Although they are relative to the DPI and the resolution of the viewing device, still on the device its self, pixels are an absolute unit. Absolute units can be critical to use when designing for responsiveness, pixels are best used for maintaining consistency between the elements.

Relative Units

Relative units on the other hand are relative in relation to other elements or property. From the units available EM, REM, %, VW, and VH are all relative units.

EM - The EM unit is relative to the current font size.
REM - This unit is relative to the root element.
% - Relative to the parent element
VW - Is relative to the viewport's width
VH - Relative to the viewport's height

In most browsers, the default font size is set 16px. Relative units will calculate the size based on this unit unless that value is changed manually via custom CSS, in that case, that value will become the calculating relative unit. If we go ahead with the 16 pix example, the number you specify will multiply that number times the default size.

1 EM = 16 px (1*16)

2 EM = 32 px (2*16)

1 REM = 16 px (1*16)

2 REM = 16 px (2*16)

100% = 16 px

200 % = 32 px.

The same principle will be applied even if you change the base font-size value, simply multiply the number with the default size value that you've set.