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 online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

We build a solid first version of your product
We train your development team
We rescue your project in trouble

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

wattenberger.com

License for source code

Henning Koch

March 30, 2021Software engineer at makandra GmbH

Posted by Henning Koch to makandra dev (2021-03-30 08:51)