Menu
I am a little stumbled at this find and cannot explain to myself the reasoning behind this.
The attached fiddle shows two DIVs, one nested in the other. The outer DIV has a set height and width as well as relative position. The inner DIV also has a set height and width. In addition to that, it was has top, right, and bottom padding set to 100%. \
From what I understand padding will be derived based on the parent's height and width. However, the result shows that all padding (top, right, and bottom) reference only parent's width. It seems that all browsers render the same results. As such, it must be part of some standard.
My question is why has this been implemented in such a way and whether there is a way for me to reference parent's height instead of parent's width for top and bottom padding.
502
What is meant by width 100%? if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.
Margin and Padding in percentages are calculated by the width of the parent element.
The width and height properties include the content, but does not include the padding, border, or margin. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 370px wide. Here, the dimensions of the element are calculated as: width = width of the content, and height = height of the content.
width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.
Yes, you are correct about padding-top percent referring to the width. It is part of the W3 CSS Box model specifications:
http://www.w3.org/TR/CSS2/box.html#padding-properties
You will not be able to reference height with padding percentages. It will always refer to width. Sorry =(
60
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
