Read more

What does 100% mean in CSS?

Henning Koch
March 30, 2021Software engineer at makandra GmbH

The attached article Show archive.org snapshot examines what the percent unit (%) is relative to in CSS

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

The article does a great job of visualizing the dependencies. The TLDR is:

Own property % of
height parent height
width parent width
top parent height
left parent width
margin-top parent width
margin-left parent width
padding-top parent width
padding-left parent width
translate-top own height
translate-left own width
Henning Koch
March 30, 2021Software engineer at makandra GmbH
Posted by Henning Koch to makandra dev (2021-03-30 08:51)