A couple of question of relative unit for newbie!

Hi, guys!

I am watching tutorial on webflow university.

And, a couple of question I have got are

  1. why put rem unit on padding and margin?
    as far as I understand, rem is for font size…?

As you can see via screenshot below, what’s the reason people use vh on width…? I thought I should put vw on width…

Is there anyone who could explain these?

Thanks a lot in advance!


Here is my public share link: LINK
(how to access public share link)

There are some good youtube videos that go into good depth on these topics, just search for things like rems v. ems, you’ll find some great breakdowns.

Rems are a popular choice for some layout aspects like paddings, margins, button sizes, because they scale off of the base font size. If the base font size changes, for accessibility, or because you want to change the font size at other breakpoints, those aspects of the layout will scale with it.

vh as a width measure is usually, I think, a typo. There may be a technique there I don’t use however the only really valid situation I can see using it is if you want a 1:1 aspect ratio on something, so you give it a height of e.g. 25vh and also a width of 25vh. It will be square, and 1/4 the height of the viewport.

Hey, Michael!

I do understand what you mean :slight_smile:

Appreciate with your help!!

Have a lovely day, cheers!