How does padding-top: 100% work?
css, html
Solution
Your child div is filling parent in 100% width. Padding-top property in percent is determined by div width. So, your child is getting 100% width of parent (30%) and padding top 100% means 100% width of that element. The same applies to margin-top which is calculated by width.
Problem
I have the following code: ``` .parent { width: 30%; border: 1px dotted red; } .child { padding-top: 100%; border: 1px solid black; } ``` ``` <div class="parent"> <div class="child"></div> </div> ``` And for some reason the child becomes a perfect square. This is at least weird because none of the divs have any height assigned to them. Why is this happening? What does `padding-top: 100%` do? Fiddle