Voiceover: Welcome back.
I will now quickly go over yet another
very important concept in CSS.
The box model.
So.
Basically, all HTML elements can be seen as boxes.
What the box model does
is to allow us to define space
between elements
and to add a border around elements.
The box model consists of margins,
padding, borders and actual content of the box.
For instance, text.
This image shows very well how the box model works.
So,
the content is where text and images appear.
Padding is like a transparent area around the content,
but inside of the box.
The border of the box
goes around the padding and the content.
It may be transparent, or not.
And finally, the margin is the space between boxes.
Now, padding, margin and border
are properties in CSS,
and can be specified for the entire box
or for individual sides.
Top, bottom, left or right.
We'll use all of them later.
The box model also allows us to set
the height and the width of an element.
Now, the annoying thing about the standard box model
that I just showed you
is that you just set the height
and the width of the content.
Not of the entire box itself.
This means that padding, margin and border
will be added to the height and width we specify.
Which is actually not what we want.
But fortunately,
we have a good solution for that.
There is this very useful CSS property
called box-sizing.
If we set box-sizing to border-box,
the height and the width
will be defined for the entire box.
We will use this in a second.
'Cause there is one last thing
I need to tell you about the box model.
In HTML, there are block elements
and inline elements.
Block elements use the full width of the browser
and force line breaks.
Headings and paragraphs are examples of block elements.
And inline elements don't do any of that.
For instance,
images, links, strong and em elements
are all inline elements.
What's important about them
is that you can either set their height or their width.
But enough with theory lectures.
Let's get our hands dirty with what we just learned
and get back to brackets.
As you can see,
on our web page
here in Google Chrome,
there are already some margins between elements.
For example this one here,
and this one.
It all full of margins,
already.
And that's because all browsers
add some default margins
if we don't specify any.
So let's start by remove the default values.
And to do that,
we create some rules
that will affect all elements on our web page,
using the asterisk selector.
Which goes like this.
So we just type this.
Now all elements are affected.
That's why you have these blue boxes here,
around all the elements.
This is a way of brackets showing us
that all these elements are affected
by this selector.
Now, here we've set all margins and paddings to 0.
And that's how it works.
Just write margin: 0;
and also padding: 0;.
So you see, all the margins completely disappeared.
Now, do you remember the box-sizing property?
We want to set it to border-box
for all elements.
And this is the right place
to do exactly that.
So.
Let's write box-sizing,
and then choose border-box.
Save it,
and alright.
So, no margins and no paddings anymore.
Now, I think we should add some margins
to some of the elements.
First, I would say
that the main heading needs some margin, right?
This main heading right here.
So remember.
Margin is the white space between boxes.
We want some margin these two headings,
the h1 and the h2 heading.
So we add a margin-bottom to the h1 element.
So if we remember, I said we could specify
the margins to all the sides of an element.
And so now,
I will specify the margin at the bottom.
And let's put 20px here.
That looks like a reasonable amount of white space here.
And now the same thing for the secondary headings.
Because, you know, I also don't like
that there's no space between the h2 element
and the paragraphs.
So it's again, margin-bottom.
And here, I think 10px might be enough.
Okay.
That looks much better, don't you think?
Finally, I would like to add some margin
after the main paragraphs.
So if you remember,
the main paragraphs are
this one
and this one.
And we defined it in the lecture before,
using this class here.
So again, margin-bottom.
And let's do it 20px.
So we get some nice spacing here.
So it looks a little bit cleaner right now.
And that's it for this lecture.
I hope you learned a lot about the box model.
Which is really, really important.
So if you didn't, just go back
and look at it again.
Because in the next lecture,
we will really need it
because we will start to build a simple layout,
where we will use the concept
that I showed you in this lecture.
So,
see you there.