Learn CSS display property in 4 minutes! 🧱

hey what's going on everybody today I'm going to explain the display property in HTML and CSS now HTML elements they have a default display value they're either Block Level or inline an element that is Block Level starts on a new line and takes up the entire width available inline elements do not start on a new line the width of that element is limited to what is needed a few examples of Block Level elements would include but are not limited to header elements developments paragraph elements form elements header elements and footer elements inline elements include but yet again are not limited to span elements anchor elements and image Elements by utilizing the display property we can specify if and how an element is displayed we can set an element to be a block level inline inline block or not displayed at all here's a few examples we'll create a development with the inner text being div and a span element with the inner text being span let me zoom in a little let's go to our style sheet for my development I will set the background color to be red foreign for my span element I will set the background color to be blue that's good div is a block level element it's going to take up the entire width available span isn't it only takes up the necessary space needed to display that element even if I were to extend the width of the browser my div element takes up the entire width my span element stays the same because it's in line we can apply a width and a height to a block level element like this width will be 100 height will be 100. however for an inline element the width and height wouldn't apply you can see that our span element stays the same size by utilizing the display property we can change the behavior of these elements how they're displayed if I set my div elements to be block well it already is a block level element there's no change if I set my span element to display as a block level element well then we can apply a width and height these two elements are displayed as a block all of this extra white space is allocated for each of these elements their Block Level if I were to create a paragraph let me shrink this a little bit I'll create some sample text I'll type lorem then hit tab these are not within paragraph tags just so you know all of the space is reserved for my Block Level elements that's important later now let's go back to our style sheet if I change the display property to be in line guess what's going to happen well both of these elements are in line now we can't apply width or height properties to these elements they only take up as much room as necessary all other content is displayed in line with them then there's inline block it's much like inline but we can also apply a width and a height these two elements are no longer taking up the entire width of my viewport if I were to increase the size of my window we can display content in line with these inline blocks you can see that the text is lined up then there's none will effectively erase that element as if it's gone if I revert these displays to inline block there's also the visibility property which is fairly similar to display if I set visibility to be hidden with our div element this element is hidden but it's still taking up space as if it was still there it's kind of like it's invisible whereas in if display was set to none it's as if it no longer exists the next element will take its place all right everybody that is an introduction to the display property we can display elements as a block inline inline block none or by utilizing the visibility property we can hide them and that is an introduction to the display property in CSS

Channel: Bro Code

Views: 20,869

Keywords: CSS display, CSS block, CSS inline, CSS inline-block

Id: 9T8uxp5hQ60

Length: 4min 12sec (252 seconds)

Published: Thu Sep 21 2023