How is padding calculated when using percentage (%)?

Question

Why does the padding in this example not equal 300px?

#Test{
  width:600px;
  padding-right:50%;
  box-sizing:border-box;
  background:#ddd;
}

<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

Where is the browser deriving it's calculation, 50% of what?
In the example below the padding actually becomes smaller as the container of #Test becomes larger.
I actually want the width of #Test to be dynamic however I've fixed it for the purpose of this example.
And how do I get 50% padding of #Test?

Notes: I am not just looking for a solution but an understanding of the way padding is working here.

`50%` is a relative measurement. the question you should be asking is what that measurement is relative **TO**. — Marc B, Jan 12 '16 at 16:03

score 11 · Accepted Answer · edited May 23 '17 at 11:59

TL;DR

The padding is calculated according to the parent's width

First, you should note that:

Percentage:
The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3c, emphasis mine)

This means the padding is calculated according to the parent element width (it's worth to note that in non flexbox layouts, padding top and bottom are also relative to the width of the containing block).

With box-sizing: border-box

When you change the default box-model to border-box, the padding (and border) is included in the width of the element like in your example. So with

width:600px;
padding-right:50%;
box-sizing:border-box;

The right padding must be 50% of parent's width but the overall width of element is 600px wide. The only moment the padding right is 50% of element's width is when parent width = element width (Note that this can't happen in your example because the parent is body and body has a default margin).

Workaround:
If you want the padding to be 50% of the element's width, in this box model you can:

set a fixed padding: width:600px; padding-right: 300px;
give the element a fluid width : width:50%; padding-right:25%;

Without box-sizing: border-box

In the default box-model, the padding isn't included in the width of the element so element width = 600px + 50% of parent's width as you can see in the following example:

#Test{
  width:600px;
  padding-right:50%;
  background:#ddd;
}

<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

Workaround:
If you want the padding to be 50% of the element's width, in this box model you can:

set a fixed padding: width:300px; padding-right: 300px;
give the element a fluid width : width:25%; padding-right:25%;

References:

The box model MDN, W3C
The padding property : MDN, W3C
The box-sizing property : MDN W3C

With this in mind how do you create a desired percentage width for an element? — DreamTeK, Jan 12 '16 at 16:10
@Obsidian well in your case, it's pretty simple as you have a fixed width in px, you can give the padding a px value too, example : `padding-right:300px;` — web-tiki, Jan 12 '16 at 16:12
:) and on a dynamic element I assume I would have to include an additional nested div? — DreamTeK, Jan 12 '16 at 16:13
@Obsidian you can do that or, if you want the element to have 50% width and have a padding equal to 50% of i's width, you can give padding a value of 25% because `50 / 2 = 25` . — web-tiki, Jan 12 '16 at 16:15
@Josh Crozier: don't link to REC-CSS2 - that's the 1998 spec and some sections contain differences from CSS2.1. — BoltClock, Jan 18 '16 at 11:16
Thx for pointing that out @BoltClock I also changed the links and references in the answer. — web-tiki, Jan 18 '16 at 12:06

score 1 · Answer 2 · answered Jan 12 '16 at 16:08

It's in relation to the parent element's width, unless the parent's width depends on this one.

From W3C's CSS 2.1 Specification:

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

How is padding calculated when using percentage (%)?

2 Answers2

TL;DR

With box-sizing: border-box

Without box-sizing: border-box

Linked