ABSOLUTE VALUES

These are definite values.

Pixels - when we define a size in pixels, that is a set-value, it will always be that value. In most browsers, the default size is 16px.

inches = 96px = 2.54cm

pixels = 1px = 1/96 inches

1px = 0.01041 inches

1px = 0.0264 cm

200px = 5.28cm

20px = 0.528cm

RELATIVE VALUES

These are relative to something, it can be relative to it’s parent, font-size. etc

REM - This is relative to the font-size of the root element (i.e <html>). For most browsers font-size is 16px; therefore 1rem = 16px. You can change the default font-size on your browser using <html> tag.

html {
    font-size: 10px;
}

EM - This is relative to the font-size of its parent. If the parent is the body, it will be 1em = 16px. em is not really useful in most cases because for nested elements, it will double the font-size. When using em, nested elements will take the font-size of the parent, so a font-size of 2em will be 16 × 2em = 32px.

 <ul>
    <div>Orange</div>
    <div>Mango</div>
    <div>Potato</div>
 </ul>

Tips

Viewport is the user’s visible area of a web page. In HTML5, you can control the viewport, using the <meta> tag.

VW - This is relative to 1% of the width of the viewport. vw does not have to care about padding and margin, but also remember to still remove margin and padding.

VH - This is relative to 1% of the height of the viewport. relative units such as vw/vh, are crucial in making a website responsive.

Tips

Relative units such as vw/vh, are crucial in making a website responsive.

% percent -

This is relative to the avlue of the parent element. percentages (%) has to take into account the padding and margin, so it has less to work with.

example:

If you set a <div> width to 50%, it takes half of the web page <body>

<body>
    <div>
        <p>The quick brown fox </p>
    </div>
</body>

To make percent (%) not have to worry about padding and margin, use this code.

*{
 padding: 0;
 margin: 0;
}

The difference between % and vw

% is based on the available size of it’s parent. vw is based on the entire view-width of the screen.

Thanks for Reading

follow me: twitter

Units of Measurements in css

ABSOLUTE VALUES

RELATIVE VALUES

% percent -

Thanks for Reading

Subscribe to my newsletter

Ifeanyi Chima

Ifeanyi Chima