Why are we using padding-top (pt) to give space between the browser and the container (as opposed to using margin-top)?

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/

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

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