Percentage in Width & Height, Which Is the Standard

·

1 min read

The standard of percentage in width and height is a parent's width and height.

Then, which part of a parent is applied? Is it content, content plus padding, or content plus padding plus border?

Please see the example below.

All the children's widths and heights are 100%.

But the box-sizings are different.

If you see the sizes of each element using a dev tool, you can notice the standard is a parent's 'content' part. No padding or border is included.