Learn CSS height and width in 6 minutes! 📏

hey what's going on everybody today I'm going to give you an introduction to the width and height properties in CSS all right let's begin everybody we will Begin by creating two div elements and each development will have a class of box within our first box let's create an H2 header with the text of this is number one and we'll create a paragraph underneath to generate some text in vs code you can type lorem then hit tab all right let's copy our div paste it change number one to number two and that's where we're at So within our style sheet we can set a height and a width for an element an ID or a class so let's take our box class dot box I'll add a border border 2 pixel solid just so that it's easier to see here we are okay normally with the height by default it's Auto we don't need to explicitly state that you can see that there's no apparent change when I reload the page so the height is going to be calculated automatically when we render our web page but you can set an explicit height for example 100 pixels that's a little too small our content is kind of overlapping let's change that to 200. now it's a little too big but it is possible to set a fixed height so let's set height back to auto now we will change the width so with the width we can set a number of pixels for example 100 we would have two very long skinny columns and they're right on top of each other that's because divs are Block Level elements we'll Reserve this entire space for each of these developments because they're Block Level so let's change the width to 200 and see what happens now they're more of a box shape if I set width to be Auto the width will be calculated automatically and like I said that's the default these Block Level elements want to take up as much width as possible kind of like your mom if I changed width to be 50 the width of this element will take up 50 percent the width of our viewport but we're still allocating all the space for each development because they're Block Level if I were to use the float property let's float to the left the reason that these elements aren't floating there's still not enough space to place Box 2 next to box one because we have our border our border takes up two pixels if I were to remove the Border they should display back to back which they do you do have to take in the width of the Border when calculating the width the same thing applies with padding let's apply a little bit of padding padding 25 pixels now we have 25 pixels worth of padding between our content and the Border I mean it looks nice right when calculating the height or the width we can disregard any padding or any borders but we have to add this property we'll add box Dash sizing border Dash box when we calculate the height or the width we're allocating disregard any padding or any borders the Box sizing property will take that into consideration we can now fit these elements right next to each other the width of each box is 50 and they both have borders and padding what you also might see with box sizing is that what some people like to do they'll use an asterisk as a selector that means all elements and then they'll apply the Box sizing property to all elements because well it can be kind of annoying to calculate width and Heights while factoring in padding and borders as well all right now if we were to float right box one is on the right box two is on the left let's undo that you can set a minimum height and a minimum width as well so with our two boxes let's get rid of our paragraphs I'm going to text align Center just to Center our text this is number one this is number two if I were to set the max width to let's say 25 percent even though we stated the width should be 50 the max width is going to cap that out at 25 percent you can see that the sizes of these box have shrunk or maybe if I set a minimum width of 75 percent we're saying that each of these boxes should be at least 75 percent even though before we declared them to be 50 percent you also have Max height and Min height there's really going to be no change between the two since the height of our web page starts at the top here and ends right here we're not using all the space down below so what I propose is that let's place our boxes within a container we'll create another div with a class of container to contain our boxes let's take our two boxes and place them within this development so with my container the container class with our container let's change the background color to something great just so it's easier to see we can't see our container because our boxes are taking up all the space with our container if we need to take up the entire height of our web browser we can set the height to be 100 VH meaning viewport height so now our container is taking up 100 of the height available if I were to zoom out the container is still taking up all that space so with our boxes let's change the background color because I can't really see them that well anymore for the background let's change that to be white I'm going to zoom out to 100 percent with my minimum height property I will set the minimum height of our boxes to be 50 percent now they take up 50 of the space available which is one hundred percent our viewport height if I were to change the minimum height to be 100 we take up the entire space available or I could set the max height to be 50 percent even though we set max height to be 50 we don't necessarily need all this space because there's not enough content if I absolutely need these boxes to take up at least 50 percent of the height of my window I would use minimum height instead of maximum height so really it's up to you alright everybody so that is an introduction to the height and width properties in CSS foreign

Channel: Bro Code

Views: 16,728

Keywords: CSS width, CSS height, CSS box-sizing, HTML width, HTML height

Id: QctF-i4-GuM

Length: 6min 53sec (413 seconds)

Published: Thu Sep 21 2023