Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

runa verse
runa verse
409 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?

3 Answers

Flor Antara
Flor Antara
12,359 Points

Hi Runa,

That is an excellent question.

You can use either padding-top or 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 margin-top/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.

Read more: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Patrik Horváth
Patrik Horváth
11,085 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

use

padding: 1px 2px;
// 1px = VALUE TOP AND BOTTOM
// 2PX = VALUE RIGHT AND LEFT

OR

padding: 1px 2px 3px 4px;
//1px = VALUE TOP 
//2px = VALUE RIGHT
//3px = VALUE BOTTOM
//4px = VALUE LEFT
runa verse
runa verse
409 Points

hmmm the treehouse example used padding-top. I don't know how to take your advice!

Patrik Horváth
Patrik Horváth
11,085 Points

for example u will be using Bootstrap FRAMEWORK and if u make margin-top your content get in some cases destroyed like in Mobile version and also its more clear use margin:
instead of margin-top: then margin-right: then margin-left: ....

and if you beggining with CSS try to aim on using REM or EM instead of PX :) it will also help you in future :)