Instructor: So now that you got the fundamentals
of the box model down, let's go one step further
and talk about different types of boxes
that exist in the box model.
And maybe you had already noticed
that there are different types of boxes in CSS.
So let's inspect this element here to show you what I mean.
So this one, for example, and you see that this H2 element
occupies all the space that it can occupy.
So, basically, it goes all the way
from the left side to the right side, right?
And the same is true, for example, for this entire header,
of course, for this entire article and the header as well.
And really most of the elements are like this.
But then there are also other elements,
so other boxes, so to say, like this one.
So here we have this strong element,
but you see that it only occupies exactly the space
where its content actually is.
And the same thing is true for example, for this image here.
So you see it's only really 50 by 50 pixels
which is exactly the size of the content itself.
And for example, the same thing here
with this anchor tech, which again, you will now see
that it occupies exactly the width that is needed
for its content.
So these types of boxes that only occupy
exactly the space that they need for its content
is what we call inline boxes.
And on the other hand, all these other boxes
so, for example, this paragraph or this H3 heading,
these we call block level boxes or block level elements.
So block level elements or boxes
occupy all the space that they can
and they basically create line breaks after them
or, in other words,
they cannot be side by side with one another, right?
So, of course, if they take up all the space
they need horizontally
then, of course, they cannot be side by side.
That makes sense, right?
So these are the fundamental differences
between block level boxes and inline boxes
but there are some more.
So let's take a look at a comparison.
So here I highlighted all of the block level elements
or block level boxes that are on our page right now.
And as I already mentioned
these elements are basically formatted as blocks
so big blocks of content which occupies 100%
of the parent elements width.
And that is true even if the content itself
wouldn't actually require so much space.
For example, this what is HTML heading
actually wouldn't need the entire line, right?
But it is still a block level element because then
they can be stacked vertically one after another by default.
Now one thing that is very important to mention is
that the box model applies exactly
as I showed you before to block level elements
while the same is not true for inline elements
as we will see in a second, okay?
Now, by default, most of the HTML elements
are actually block level elements.
So things like the body, main header and so on and so forth.
So most of the elements really that we used
are block level elements.
So we can also say that they create block level boxes.
All right?
Now one thing that we can do with CSS is to change
from inline boxes to block level boxes, and we can do that
with the display property set to the value of block.
But we will do that in practice in a second.
But for now, what I want to do is to look
at the inline element
and how it's different from block level elements.
So here I marked the in-line element with this red border
and you see that as expected they only occupy exactly
the space that is needed for its content.
They also don't create any line breaks
after or before the element.
And so, therefore, they can simply stay inside
of their parent element
without creating any additional space.
And this is exactly what makes sense for smaller elements
like the strong element, the EM element,
or anchor elements, right?
We wouldn't want these elements to create a new line
and occupy all the width that they can.
That just wouldn't make any sense and, therefore,
that's why we have these different types of boxes.
But anyway, now about the box model, as I said,
it works differently in inline elements.
So for inline elements, the heights and width properties
do not have any effect.
Also, headings and margins are only applied horizontally
or, in other words, on the left and right sides,
but not on the top and bottom.
And this fundamental difference
about how the box model works for inline elements
is extremely important to always keep in mind
and to never forget because this is a mistake
that I see beginners make all the times,
which is basically to not understand why certain properties
of the box model do not work as expected
when applied to inline elements.
So take note of this
as it is very important to always keep in mind.
Now by default, some of the elements
that are inline elements, so which create inline boxes
are the anchor image, strong, em, the button as well
and many more.
Now just like we can use to display property
to make any element a block level element,
we can also use display set to inline
in order to transform any block level element
to an inline element.
And actually let's now go back to our code
to see some of these things in action.
And let's start by trying to format these links here
that are in the header.
So let's select them, but I will do that more down.
So let me actually create some comments here.
So let's say that these are like page sections
or something like that.
So, basically, all the big dividing pieces of our page.
So we have the body, of course, the container,
the main header, the navigation article, and all of that.
And then here is where we start to have
or like smaller elements.
And these titles here don't really matter.
I just want to have like a visual separation
inside of the code.
Okay, so let's go down here, all the way down,
maybe let's say here.
And so I want to select all the links
that are inside of the navigation.
So let's say navigation and then the links in there.
And, as always, I should use the link pseudo class
to actually style them.
Now to see this a little bit better what happens,
let's give them a color, a background color like orange red.
And now I need to manually reload here.
Now, okay, so we got that background color
and now let's start by adding some margin here.
Just so we see that the box model does
in fact not applied way that we thought it would.
So let's say 20 pixels and give it a save.
And you see that some margin was added horizontally
so on the left and right side, right?
But what did not happen was that vertical space was created.
So the top and bottom margins remained unchanged.
Now if we check this out here
in the box model in the dev tools
then it will still appear down here.
Some more space here.
So you see that the 20 value does still appear
but then here on the colored overlay,
so here this orange actually did not create any space
even though it says 20 here, right?
And so as you know by now, the reason for that is
that the anchor element is an inline element
where the box model does not create any vertical space.
And the same is true for padding.
So padding of 20 pixels.
So let's see.
And now it does actually look as if some space was created
but that is only true for inside of the element
because, in fact, the anchor content, so the anchor content
itself is still in the exact same place,
but if this was a block level element,
then all of this would've moved down a little bit.
So basically the fill area of this element has been expanded
and filled with the background color
but no new space was in fact created.
Okay, but if we actually want to have that space
and if we want the elements to be one after another
then, of course, we can change them to block level elements.
So that is exactly what I showed you in the slide
by using the display property
and set it to the value of block.
And so this will then render the inline element
as a block level element.
So what do you think will happen once I save this now?
And there we go.
Now all of these elements occupy all the width that they can
and also they have now actually also vertical margins
between them.
Now they are kind of outside of this header element now
because we set the header element to a fixed height
so in one of the previous lectures,
so let me show that to you with the overlay,
we need some more space here.
And so since we set the height to the header
to a specific value of AD pixels,
then the content no longer fits in there.
And so the element did not expand
in order to fit the content.
So that's the reason why, usually,
we don't set a fixed height on elements.
So let me go back and change that.
So that was just a demo anyway, so yeah,
here is the height that we set to 80.
So let me comment that out, save it again.
And now the element expanded vertically here
to account for the additional space that is required.
Okay, so hopefully that makes sense.
But the main point here is that these anchor elements here
now do satisfy all the conditions
of being a block level element.
So the box model applies to them normally
and they occupy 100% of the available width
and so, therefore, they appear one after another
nicely formative as blocks.
All right?
So they occupy all the space as we see here
which, of course, includes the margin.
So each of these, if we take a look, has some margin, right?
So that is this kind of orange color here.
And so that is part of the entire space
that the element itself requires.
All right, well let's go back down here
and actually turn all of this off
because this was really just a demo, okay?
And now, of course, we will see the header shrink back
to only occupy a vertically here the space that it needs.
Right, so as we keep adding more and more elements
then this should grow, which is exactly what happened
before when these links were bigger
but now they're back to being small
and, therefore, all that space we had was not required.
And now next, let's actually quickly try the opposite
and change some block level elements to inline elements.
So, for example, let's try what happens
when we make the list elements as inline.
Display inline.
Let's remove this actually.
And now you see that these three elements
are now basically side by side
and occupy only the space that they need.
And actually let's bring this back because,
as I mentioned, the dev tools are really so important
especially for overlaying like these boxes, right?
So now the boxes are side by side like this
because they are inline boxes,
so they no longer create the line breaks after them
and only occupy the space that they need.
Let's try the same, turn it off here
and try the same on the paragraphs.
And so that looks even stranger
because all the text basically collapsed
just into one big line of text it looks like, right?
So again, each of these elements
now basically only occupies the space that it needs.
All right?
But let's remove this
because it doesn't make much sense in this situation,
but in some situations it actually makes a lot of sense.
Now, in many situations what makes even more sense
is to transform a block level element
into something called an inline block element.
So basically that's a mix of inline and block level.
So let's quickly check out what that means.
So here we have a quick summary
of both the block level and the inline boxes.
So we already know that,
so we don't need to go over all that again.
But then there's basically a third type of box,
which is a mix between these two.
And so that is, as I said before, the inline block box.
So inline block boxes,
they look like inlines from the outside,
but they behave like block level elements on the inside.
So what that means is that inline block boxes
do only occupy the space that they need for the content.
And so, therefore, they do not cause any line breaks.
So this is what I mean when I say that the inline block box
behaves like an inline box from the outside.
However, as I said,
it behaves like a block level box on the inside.
And so what that means is that the box model applies
just as it does for block level boxes.
So we can still set heights and width
and we can still use margins and paddings
just like on block level boxes or on block level elements.
So these are kind of the same,
so I keep using them interchangeably.
So, essentially, inline block boxes really combines
the best of both worlds of block level and inline.
And in order to create an inline block element
all we have to do is to set the display property
to inline block and that's it.
And so let's now see how we do that in practice
and some situations where this can be extremely helpful.
So let's go back here to our header links,
so to this navigation so that I can show you
where an inline block element can be very helpful.
So right now there is not a lot of formatting here
so like no spacing.
So we need to fix that.
So this was somewhere down here, right here.
And so let's go back to trying to add some margins
without changing anything in the display property for now.
So let's say we wanted a margin right of 30 pixels
and this should work because it is a horizontal space
and so that works even on inline elements.
But now if I wanted to add a margin top
of let's say 10 pixels, then nothing will change, right?
So it stayed the same.
And so that's exactly the behavior that we saw already
at the beginning.
But now if we change the display to inline block
then see what happens.
So you saw that now we got our space here
and if we check this out
then indeed you can see that orange space
on the right side and then the 10 pixels on the top.
So the box model is back to being applied
as a block level element,
but on the outside the elements are still side by side
and occupying only the space they need.
So behaving like inline elements.
So this is a great technique in some situations
even though at this point we also have more modern ways
of doing something similar, but, in some cases,
this will actually be very good to know
and a good technique to have in your tool belt.
Now, just one final detail is that
we should remove that margin right from the last element.
So let's select that nav a: link
and now you will see something new.
So this here is a pseudo class, right?
But onto that, we can chain another pseudo class
because now we want the last child, right?
Like this
and then we want to set the margin right back to zero.
Okay, so visually that changes nothing.
But here we now see that this one
no longer has that space on the right side.
And many times that's important to do.
And so that's why I wanted to show you
that we can change these two pseudo classes
like this without any problem.
Great and now, just to finish, I wanted to show you
that images are actually inline block boxes.
All right?
So I said in the beginning
that images are actually inline elements,
but in fact they do behave like inline block elements.
And we can easily demonstrate this
by adding some margin, for example, to this post image here.
So, if I add a margin of a hundred pixels here,
then if it was an inline element,
it should not create any vertical space.
So not here and not here, right?
But watch what happens as I save this
And so indeed you see that all of this vertical space here
was added and so that is proof that, indeed,
it is an inline block element.
And the same is true for the fact that we can set width
and heights for this element.
So, if it was a purely inline element,
then these two here would also not work, right?
So that's also important to note
and let's just set it back to normal here.
Okay, so that's it for the type of boxes in CSS.
Just as a quick summary or, basically,
as a takeaway from this lecture,
most of the time we will actually leave
the display setting alone
and simply use the predefined box type
because, by default, they do actually make a lot of sense.
However, we can use display set to block
in order to make a small inline element, for example,
occupy an entire line,
which is something that we will sometimes need
in the real world.
Then the other way around,
sometimes we don't want a block level element
to push all the other elements into a new line.
So, basically, we don't always want them to occupy
all the available blank space that there is to fill.
And so, in that case, we can set them to an inline element
or, probably even more useful,
we can set them to an inline block element
because then we can still apply the box model as usual.