Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Anas Rida
Anas Rida
8,183 Points
Posted by Anas Rida
Anas Rida
8,183 Points

add padding

if we have a 400px wide div and we added 50px padding on the left and right side, will the div itself become 500px wide or 300px. I know that padding is the space between the margin and the element, and what I saw from the video is that adding padding actually added width to the div (I'm not saying that the div itself became wider, by added width I mean the width of the div + the width of the padding). Or is the width of the padding subtracted from the width of the div? Many thanks in advance

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

:point_right: Padding is NOT the space between the margin and the element, padding is always inside the element.

Now whether it changes the width of the element depends on a few factors. For example, if the element is constrained by a containing element, the element size will not change but the content area inside will shrink.

But if the element has an explicit size or contains another element with a fixed size, the element will expand by the amount of added padding.

Another factor might be box-sizing. If content-box (the default) is used, padding will expand the element, as mentioned above. But if border-box is used, padding will shrink the content area.

:cool: I know this is a tough concept to digest just from a description. But Guy Routledge has a really neat little demo that will instantly show you the effects of changing borders, padding, and margins on your choice of content-box and border-box elements. I think you'll find a few minutes of experimentation quite enlightening.

Anas Rida
Anas Rida
8,183 Points
Anas Rida
Anas Rida
8,183 Points

thank you very much for the link, it does clear up a few things. What I noticed is that the content-box and border-box is what affected the element size when the padding varies, with content-box adding the padding on the outer of the element and border-box actually taking up the element space for the increase in padding.

Milan Nikolic
Milan Nikolic
24,365 Points
Milan Nikolic
Milan Nikolic
24,365 Points

It will become 500px. padding is inside box. padding left (50px) + padding right(50px) + 400px = 500px.