All language subtitles for 039 CSS Theory 4_ Types of Boxes.en_US

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'll see, it's only really 50x50 pixels,

which is exactly the size of the content itself.

And for example, the same thing here with this anchor tag,

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 occupied

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 element's 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 it 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 use

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 inline elements with this red border,

and you see that as expected,

they only occupied 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 elements 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 height and width properties do not have any effect.

Also paddings 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 inland 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 do 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.

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 see 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.

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 edit 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 have 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.

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 80 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.

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 formatted 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 vertically here the space that it needs.

All right, so as we keep adding more and more elements,

then this should grow,

which is exactly what's 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'll 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 occupied a space that they need.

Let's try the same.

I'll turn it off here and try the same on the paragraphs.

And so that looks even stranger

because all the texts 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 the situation,

but at 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 occupied 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 another 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 of 30 pixels,

and this should work because this 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's stays the same and 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 on to 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 dead 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 chain

these to 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 100 pixels here,

then if it was an inline element,

it should not create any vertical space.

So not here and not here. All 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.