CSS padding-top: 100% uses width of parent?

Question

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.

There's a [related thread](https://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-of-parent-container) with a solution which might help you. — WoodrowShigeru, Apr 08 '18 at 10:50

score 7 · Accepted Answer · answered Jul 21 '12 at 23:35

7

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 =(

answered Jul 21 '12 at 23:35

Spicy Koala

517
3
8

I think in css there should be option to choose what you want to refer to when using percentage inner content, parent, or some other element. Why is css so limited. – Muhammad Umer May 22 '14 at 04:50

CSS padding-top: 100% uses width of parent?

1 Answers1