How does padding property affect the width and height of a child element?

Question

I've read that setting the padding property of an element increases both the height and width of the element. This is true when used on an element that is not nested inside any other element. But as soon as I set the padding property of a nested element,say a paragraph nested inside a div, only the height of that nested element increases and the width remains the same.Should it not increase the width too?Also when I specify very large values for padding of the nested element, it expands out of the container element. Can somebody please explain me this behaviour?

Answer 1

You must search google for CSS BOX Model ?

The padding area extends the content area with the empty area between the content and the eventual borders surrounding it. It often has a background, a color or an image (in that order, an opaque image hiding the background color), and is located inside the padding edge. Its dimensions are the padding-box width and the padding-box height.

The space between the padding and the content edge can be controlled using the padding-top, padding-right, padding-bottom, padding-left and the shorthand padding CSS properties.

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