Menu
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
377
Percentages: The padding size is relative to the width of that element's content area (i.e. the width inside, and not including, the padding, border and margin of the element). So, if your #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.
Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers. The flexbox specification has the same wording.
Definition and Usage An element's padding is the space between its content and its border. The padding-top property sets the top padding (space) of an element.
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size . Note: Only calculated values can be inherited.
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.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
