What does 100% mean in CSS?

Updated . Posted . Visible to the public. Repeats.

The attached article examines what the percent unit (%) is relative to in CSS

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
Profile picture of Henning Koch
Henning Koch
Last edit
Jonas Schiele
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2021-03-30 06:51)