In today's video, I'm going to be talking about one of the most requested CSS topics I've gotten and that is the CSS display property.

I'm gonna teach you everything you need to know about the display property in no time at all.

So let's get started now to get started.

I have a really simple example of the different display properties at work.

And as you can see inside of my HTML, I just have a div, which is red.

I have a span, which is the cyan color, an image right here in the middle.

And then I have another span of this purple color.

And then finally, this lasted at the very bottom.

And as you can see already, I have three different display properties at work.

The very first display property is these dibs.

You could see they take up the entire width of the screen and nothing else is on.

The same line is, um this is because these dibs are displayed block by default.

So, for example, it would look like this display of block that is their default display property.

And what display block does is it means that this is going to take up the entire with given to it.

Essentially, it's going to force a new line above it and a new line below it.

So all of the content on this element is goingto have nothing next to it, all the content easier above it or below it because it takes up the full with.

As you can see here, this div doesn't sit right next to the span here because it has to have a new line of the beginning.

So essentially it's on the next line and it takes up the full width.

Same thing with this DIV.

The span is not next to that debate, and that's because the studio is just played block now spans.

On the other hand, they are a default of display in line, and essentially, What in line elements is do is they take up the minimum amount of space possible.

As you can see this blue color, the cyan color on Lee takes up the minimum amount of space to fit all of the content inside of this span.

So that's what an inline element does.

Also, as you can see all these in line elements, they're all in the same line.

They share the space together because they take up the least amount of space possible.

There's no line breaks or anything on these elements.

They all try to fit as closely as possible to each other.

And that's what Inland elements do now.

This image is a little bit different because this is a combination of the two.

This is an inline black element, and the way in in Leinbach Element works is it is exactly the same as in mind element.

It's going to try to take up the least amount of space possible.

Other things could be on the same line of it, but with an inline Bach element, you can set the whip and height of the element.

As you see here, this image is 50 by 50 pixels.

If I try to change this span, which we know is in line, and I try to say I want a height of 400 pixels and a with hear of 500 pixels and I save you see the span isn't changing, nothing is actually happening.

And that's because in line elements can't have a with their height.

Even my editor is yelling at me.

As you can see, these are underlined saying that they don't actually work.

So if you wanted to have with in height on an inline element, you need to make sure you use in line block.

Now, the last main type of display that you need to know is going to be displayed None.

And this is really straightforward.

We're gonna make this final def.

Here display of nun.

And as you can see, it just completely disappears.

Displayed.

None acts as if the element was just completely deleted from your HTML.

It's as if it doesn't exist.

Everything else will move around it if we change this back here to its normal display.

And instead we make this first span a display of none.

You can see that everything just moves over as if that span never existed.

It doesn't take up any space.

It's not just invisible, it literally does not exist.

Now there are two other display properties that are really common that you're gonna want to know, and that is going to be display flex and also display of grid.

And these elements are incredibly complex, and they have a lot of intricacies to both of them, which is why I have full videos on both display flex and display grid.

Explain all of the in depth details of those display properties, So if you want to learn more about those, make sure you check them out, linked in the cards and the description below, and that's it.

The display property is really that simple.

If you enjoyed this video, make sure to check out my other videos leaked over here and subscribe to the channel from more videos just like this one.

Thank you very much for watching and have a good day.