Menu
Here is an example:
http://jsfiddle.net/QZAd8/1/
Notice how all of the red divs are the same height and have padding-top:100%;, yet they A & B have different padding sizes... and it appears that the width of the parent changes this value (note that C changes the height of the parent, yet that doesn't alter the padding).
Why is padding related to width in this way?
Edit: for historical reasons, and in case jsfiddle goes away, the code I used in my example is as follows...
.outer { background-color: green; height: 300px; width: 70px; float: left; margin-right: 10px; } .middle { background-color: red; height: 100px; width: 50px; padding-top: 100%; } .inner { background-color: blue; height: 3px; width: 100%; }<div class='outer'> <div class='middle'> A <div class='inner'> </div> </div> </div> <div class='outer' style='width:100px'> <div class='middle'> B <div class='inner'> </div> </div> </div> <div class='outer' style='height:400px'> <div class='middle'> C <div class='inner'> </div> </div> </div>
562
Padding and Element Width CalculationsIf an element has a specified width, any padding added to that element will add to the total width of the element. This is often an undesirable result, as it requires that an element's width be recalculated each time the padding is adjusted.
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.
Percentages can also be used to set the padding and margin of elements. When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.
Width is the space from left to right that the element takes up on the page. Padding is the space around the content of the element (all four sides) but inside of the border. Using a larger width you would just stretch the element out further and the height would not change.
From CSS fluid layout: margin-top based on percentage grows when container width increases :
In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.
Straight from the horse's mouth:
'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Value: <padding-width> | inherit Initial: 0 Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column Inherited: no Percentages: refer to width of containing block Media: visual Computed value: the percentage as specified or the absolute length Percentages: refer to width of containing block
195
Just because it's the way it is suppose to be :) http://www.w3.org/TR/CSS2/box.html#propdef-padding-top
26
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
