Learn CSS Display Property In 4 Minutes

hello everyone in today's video I'm gonna 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 Scion color an image right here in the middle and then I have another span of this purple color and then finally this last div 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 divs you can see they take up the entire width of the screen and nothing else is on the same line ISM this is because these divs are display block by default so for example it would look like this display of a block that is their default display property and what display block does is it means that this is going to take up the entire width 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 going to have nothing next to it all the content needs either above it or below it because it takes up the full width as you can see here this div doesn't sit right next to this span here because it has to have a new line at 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 div and that's because this div is display a block now spans on the other hand they are a default of display inline and essentially what inline elements is do is they take up the minimum amount of space possible as you can see this blue color the cyan color only 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 inline elements they're all on 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 inline elements do this image is a little bit different because this is a combination of the two this is an inline block element and the way an inline block element works is it is exactly the same as an inline element it's going to try to take up the least amount of space possible other things can be on the same line of it but with an inline block element you can set the width and height of the element as you can see here this image is 50 by 50 pixels if I try to change this span which we know is inline and I try to say I want a height of 400 pixels and a width here of 500 pixels and I save you see the span isn't changing nothing's actually happening and that's because inline elements can't have a width or 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 width and height on an inline element you need to make sure you use inline 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 div here display of none and as you can see it just completely disappears display: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 in 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 linked over here and subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 288,443

Keywords: webdevsimplified, css display property, css display, css display tutorial, css display property tutorial, css display block, css display inline, css display flex, css display grid, css display none, css display property explained, display property in css, display property explained, display property, display property tutorial, display property in css tutorial, display property guide, learn css display, learn css display property, learn css, css tutorial, css, css guide

Id: Qf-wVa9y9V4

Length: 4min 14sec (254 seconds)

Published: Sat Nov 30 2019