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
Bilal Junaidy
1,775 PointsI need help!!!margin and padding
am currently doung the web design track and I am currently in the first stage of this track called "how to make a website" which itself has 10 different achievement. Now I am currently at the achievement called "CSS". Now in this this achievement they talk about centering the wrapper. could someone please answer the following question.
What does this do to the styling of the page?
margin: 0 auto;
padding: 0 5%;
I have watched the video 3 times and I still dont get it
10 Answers
Travis Joyner
14,553 PointsBecause he was using a percentage for his padding, resizing the browser will make the padding appear smaller and smaller as the browser width decreases. So in that case, the padding was always 5% of the container width. You have to keep in mind different browser widths when you choose your padding percentages. Too much padding will make your content become skinny at smaller widths.
Roberto Alicata
Courses Plus Student 39,959 Points"margin 0 auto; " sets a margin of 0 pixel for the top and bottom and using the word "auto" for the left and right margin allows the browser to center the element in the page (in this case the wrapper).
"padding: 0 5%;" sets the padding of 0 pixel for the top and bottom and 5% for the left and the right.
Bilal Junaidy
1,775 PointsWait, is the wrapper the orange thing? if it is then some of this make sense however, I still have another question, why did the position of the image gallery? and why was the orange thing on the left of the image gallery
Travis Joyner
14,553 PointsYes, the orange div in that video has the id #wrapper. As for why it's too the left, well, the image inside is spilling out of it. This is called overflow, which you'll learn about.
Bilal Junaidy
1,775 Pointsso I shouldnt be confused about the spilling right now, right? I have another question, in the video the presenter made a very subtle point about making the size of the browser small and its relation to padding, I couldnt understand that point, so coould you also explain what that subtle point was? Thanks
Bilal Junaidy
1,775 PointsTravis could you also tell me why the image gallery was overflowing? and thanks a lot for the help
Travis Joyner
14,553 PointsIf the images are too large, they will overflow outside the container. He must either resize the image width or set the container's overflow property. For example:
wrapper {overflow:hidden;}
This would hide the overflow. There are other ways, but you'll learn that in time.
Bilal Junaidy
1,775 Pointsokay I promise this is the last question, why was the orange wrapper behind the image gallery and not the other way around. And again thanks a lot for the help, I really appreciate it
Travis Joyner
14,553 PointsNested elements will appear "in front" of their containers, unless you play with the "z-index".
Bilal Junaidy
1,775 PointsThanks a lot Travis, I really appreciate it