100% in CSS can mean different things

How many times have you wondered what 100% means in this context? Maybe not as many as this in JavaScript ;), but it’s worth getting to know it better once and for all (or at least having a quick cheatsheet).

CSS propertyPercentage value meaning
height% of parent’s height
width% of parent’s width
top% of parent’s height
left% of parent’s width
margin-top% of parent’s width
margin-left% of parent’s width
padding-top% of parent’s width
padding-left% of parent’s width
translate-top% of self’s height
translate-left% of self’s width
Source: What does 100% mean in CSS?


Thanks for reading. If you liked it, consider sharing it with friends via:

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

I want to be up to date via email!

No spam ever (I don't like spam, I don't send spam). You can unsubscribe at any time. Privacy Policy

Don't you want to subscribe via e-mail?

See other ways to keep in touch.


If you want to comment, write a post on social media and @mention me. You can also write to me directly on the contact page.