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
runa verse409 Points
Why are we using padding-top (pt) to give space between the browser and the container (as opposed to using margin-top)?
<!--About --> <div class="container pt-5"> <div class="row">
Why pt-5? Why not mt-5?
Flor Antara12,372 Points
That is an excellent question.
You can use either
margin-top. However, there's 1 important thing to always keep in mind.
When 2 vertical margins come in contact, they collapse. Causing many problems. So it's good to avoid "margin-topping" and "margin-bottoming" things. I recommend using
bottom only when no other "solution" works.
In the beginning of the video, Guil chose to go for
padding-top, but in that particular case, as that container won't touch vertically another element, you would be just fine with
margin-top. Try it out.
The collapsing margins issue is widely known, but you'll get to really understand it after having struggled with it a few times. Don't get frustrated by it, try to understand it and only then you'll rock it at avoiding "destroyed" layouts with no apparent reason.
Patrik Horváth11,110 Points
Imagine you have DIV / SECTION TAGS its SQUARE FOR EXAMPLE
Margin is SPACE OUTSIDE TAG ( DIV / SECTION ) Padding is SPACE INSIDE TAG ( DIV / SECTION )
so you can use whot you want but when you use margin you LEFT and RIGHT 10px for example so u cant get FULL WIDTH DIV (100%) from side to side but with paddin you get full width (100%)
Full Width -> For example NAVBAR on TreeHouse website :) as you can see its from left to right FULL WIDTH also when you resize screen
and NEVER use padding-top margin-top cause you get a lot of problems in future
padding: 1px 2px;
// 1px = VALUE TOP AND BOTTOM
// 2PX = VALUE RIGHT AND LEFT
padding: 1px 2px 3px 4px;
//1px = VALUE TOP
//2px = VALUE RIGHT
//3px = VALUE BOTTOM
//4px = VALUE LEFT
runa verse409 Points
hmmm the treehouse example used padding-top. I don't know how to take your advice!