Okay so going back to the same file Box Model before that HTML,
we can take a look and see that we have a h1 here and
we defined a margin-bottom of 30 pixels on h1.
Let's go ahead and go to our box and recture we'll move the margin altogether.
And refresh, will take a look what it is without the margin.
So, you could see there's some margin going on here and
that margin is coming from this h1 here margin bottom.
Let's go ahead and define a margin top so,
when you need a margin bottom is on h1 here, when you need margin top on our box.
Let's define a margin top of 20 pixels and
when we do that when we refresh absolutely nothing will happen.
And the reason that is is because the box is defining a 20 pixel margin.
Yet, the h1 ia already defining a 30 pixels margin.
So when they come together and touch,
they collapse into whatever the larger margin is.
So in this case, that's 30.
However if I made the margin to be 40 and
let's say even 50 pixels now you'll see that the box will move down because now
the box has a larger margin than the one specified on h1.
So there is now a bigger distance between the box model h1 and
the actual box and it's actually 50 pixels.
We can also notice, by the way, that the box model,
the words box model are not flush at the top with the corner of the browser.
Now why is that?
Let's go and investigate.
Let's go and inspect the element.
Let's take a look, it's got a margin of 21.4 something.
And where is this margin coming from?
Well, it's coming from, again, the user agent style sheet.
And the reason it's coming here is because of some browser specific prefixes that we
actually haven't talked about that are defining the margin before and
margin after.
We're not going to delve too much into this, but the bottom line it means that
before the element and after the element they'll define some margin.
Now the reason our margin on the body that was specified margin:
0 is not working here is very simple.
Body says anything that is below me and
inside of me is going to have the margin inherited.
But that's only if you don't override it specifically for that element.
As you see here, the user agent stylesheet has a selector h1
that is specifically overriding the margin, which therefore, wins.
This is a bit of a side point but how do we override this?
Well, now that we know about the star selector, it's easy.
You could just say and move the padding in the margin to the star selector.
And now, what this is basically saying is that I am selecting
every element specifically, and then I'm overriding its margin.
So, if I refresh the page now, you could see now it's flushed together to the top.
We won't necessarily be doing this in our pages left and
right, but at least now you know that if you wanted to reset in,
it's called CSS resetting, if you wanted to reset the CSS browser defaults
you would do this most of the time using the star selector.
Yaakov ChaikinAdjunct Professor, Graduate Computer Science
