Help padding

Question

Padding adds up with width? Does it add up like this?
Width: 90%;
Padding: 0 10%;
Result would be 100%?
Is that correct?

But another doubt about Padding

The padding when set
Padding: 10%;
Does it give a 10% spacing on all sides? Or does it divide in the four corners?

Answer 1

Padding will make the element wider.

width: 100px;
padding: 0 10%;

Width of the element will be 120px

Use
box-sizing: border-box;

The width will remain at 100px
Padding will be included on the current width.

Answer 2

Width in percentage is calculated relative to the parent element. And padding is calculated relatively to the element itself. And padding applies the same padding on each side. So width:90%; padding:10%; sizes the element width to 90% of the parent element and sets padding 10% of element's width on each side of the element.

Answer 3

Shashi Ranjan there is not talking about the sum

Answer 4

Дмитро Іванов so in case an example if I used width: 90% and padding: 10% total would be 110%? right?

Answer 5

Toni Isotalo I do not want to use box-sizing I know well how it works I want to understand how the sum of them works

Answer 6

You should read in details over here

https://developer.mozilla.org/en-US/docs/Web/CSS/padding