Master The All Important CSS Box Model - Colt's Code Camp

hey everyone it's cold today we're talking about the box model in CSS one of the most essential concepts in understanding CSS and being able to build layouts and make things look the way you want them to look this video is part of a series I'm doing on CSS and a bigger series I'm doing on coding in general but you can also just jump in and learn the box model I've tried to make it modular so we've got a lot to talk about I'm pretty happy with how this video turned out we start with the basics so we'll cover things like border padding margin shorthand M longhand and then we talk about some other properties like box sizing and border clipping so for some of you who already know the basics you may not know those two properties then we're gonna focus more on the display property and how it interacts with or changes the behavior of the box model specifically we'll talk about block inline and inline block and compare the three and then I'll wrap up with a pretty good homework assignment I think it's a good one it has some challenging pieces so look forward to that if you look forward to things like that and before we get started if you would consider sharing this video and this whole series I'm doing with anyone who's interested in coding or just sharing it in general yelling about it to the world I really appreciate it now let's get going here's a box model every element in CSS has a box around it whether you see it or not there's a box whether you're working with heading elements like an h1 a button paragraphs anchor tags images the list items they all have boxes around them and being able to understand how these boxes work that's really important but also being able to understand and use the properties to manipulate the boxes to make them bigger or smaller or change the spacing that is all crucial if you want to create layouts nice-looking or not you just want to create layouts and move content around and all that stuff hinges around the box model so there are these boxes around every single element and each box really consists of a couple different pieces there are different properties that we can manipulate and we're going to start by focusing on this inner box this purpley I don't know what color that is a light lilac color that I'm calling the content box Adam I don't know I said I'm calling that's what it's called the content box and then we have padding and border and margin we will come back to those but let's start with the content box so when any elements let's take an h1 so here I've got a code pen very simple I have some massive images we'll come back to that but I have an h1 up top if I give all each one's a background color background color of lavender okay we can see that there is a lavender box taking up the entire line now an h1 is a block level element will actually be talking more about block and inline and inline block elements because that is an important piece of the box model but for now all that you need to know about block level elements if you're not familiar is that their box the content box goes all the way across the line takes up all that space by default but I can change the width and the height using two properties width and height these are how we manipulate the inner content box how I change the size of this stuff the purpley stuff that you're seeing are the lavender stuff so I could change the width to be let's see maybe 500 pixels let's see if that's yeah maybe a little bit less how about 350 pixels sure and I can manipulate the height how about 150 pixels well that's kind of massive so maybe not but I'll just show you that we can set the height as well all right so that is changing the inner content box itself and I can do the same thing for these massive images using width and height and when we work with width and height we have a couple different units well more than a couple that we can use I'm using pixels right now just to keep it simple you can also use m/s and percentages there are other properties or special values like auto and Herot I'll be talking more about units in CSS in a separate video things like M's and root M's percentages VHS VW's all have a separate video on that so to keep this simple I'll be using pixels okay so we have width and Heights we can set a pixel dimension for that inner content box so let's do that forward the three massive images I have here these are each from unsplash.com they are cute little animals and I will set a width about 300 pixels and a height of 200 pixels okay so there are my three images and what we're seeing here there isn't a background color like we have on the h1 but we're seeing that inner content box showing up as the actual image itself but then we have these other properties and we're going to begin with border border is pretty self-explanatory it is the border around each box here and there are many different ways of setting a border let's work with the h1 first I can do it all in one line with a shorthand property where I can set a width of the border and then a style like a solid border and then a color like purple okay so that's my border there I can also change the width of course make it 10 pixels super chunky there let's go back to - not that either of them looks very good I'll do the same thing for my images I'll give them a border of two pixels how about dashed mmm magenta it's gonna be really ugly oh yeah I regret that already let's go with black so that's the shorthand version of setting border where we do it in one line but we also have a whole bunch of separate properties we can set to change the color or the style or the width of each border top bottom left and right so let's play around with the h1 I could instead do I could start with this and make everything purple and then say border top color there we go it becomes cyan I could do I guess I'll just do this border right color how about magenta and then border bottom color yellow and then border bottom or border left color maybe just magenta again so we can do that where we set each border as a separate color and I can do the same thing to give them a separate thickness I won't do this for all of them let's do border bottom is it with I think I can never remember this we'll go with five pixels for the width and it does get thicker there and then we also can change the style on one of them how about border top style will make it dotted and there we go hopefully that's showing up on the screen cast it is a dotted border so there are lots of different ways of setting the border but most of the time I'm just doing this setting a border on all four sides and one thickness consistent one color but if you ever need to call out a separate color or a separate width or separate style you absolutely can and there's also I guess what you would call a medium hand where I can set the style for all four sides at once or set the color for all four sides or the thickness or the width just like this border which I do let's do border color and set that to be teal you'll see that it leaves everything else intact the thickness and the style but it does set the color on all four so we have the similar idea but for style and for width you can set all four sides at once each side individually or set everything at once assuming that you have the same thickness and color and style for all four sides okay so that's border the border around our elements but this diagram looks a little bit different than what we've seen so far this diagram shows spacing between the content box and the border in both of these examples that content in this one is an image and it goes right up to the border and then here the content box is that while a key or lavender color background it goes right up to the border as well but that's because by default this padding property that's the name of this spacing between the content box and the border box that padding property is set to zero at least for these elements so just like with border where we have a shorthand property and then we have a bunch of long-form properties we have a similar approach with padding padding itself is not something that we add a color to but we do specify or we can specify padding on the top the bottom that left the rights or all four sides at once or two sides top and bottom left and right but I'm just going to show you the shorthand to begin with so padding is going to accept a value of a certain number of pixels or MS or some unit of percentage we're going to focus on pixels just like we did with border to keep it simple so I'm gonna set padding on all sides how about 20 pixels now watch the images here you can see now that there is space between the content box and the border that is the padding so if I set that to you know 50 pixels we get a lot more space there let's go back to 20 if we open up the chrome dev tools here go to the elements tab select our little inspector whatever this arrow is called and we hover over one of these images what we see right there it's kind of hard to tell but there's a blue box a blue highlight over the content box itself and then green is indicating the padding and then there's a very slight yellow over the border I don't know if it's going to show up in the screencast very well but the dev tools are showing me they're highlighting the content the padding and the border if I do it on the h1 there is no padding to look at it's just the content is that blue box we have an added padding and then the border is you know the four different sides and we haven't talked about margin but that orange stuff is margin another way that we can explore the box model and the chrome dev tools is by clicking on one of the elements selecting it over here or clicking this arrow and selecting it over here and then looking at this little section here this allows us to view the content first of all you can hover over the content it highlights it hover over the padding it highlights that let's do a different image that is not so green all right this one's a little bit easier to see so there is the content in blue the padding in green and the border in yellow hopefully that shows up I can also tweak them on here and play around with it so if I wanted to add more padding I don't know on the right hand side I can type a number in about 40 pixels and hit enter and now that change is reflected here it's just temporary as soon as i refresh the page it's going to disappear okay so those dev tools can be very useful that is the basic idea of padding it's that space between the content box and the border so this padding property that we've been looking at so far on the images we pass in a single value it applies 20 pixels of padding to all four edges or all four sides of that content box we also can specify individual pieces like padding top padding right padding bottom so I could do you know 20 pixels on all sides and then on the bottom I want 40 pixels and there we go we get 40 pixels on the bottom 20 20 and 20 I also could use a different version or a different value for this padding property we can pass in one value which will be applied to all sides I can pass in two which will apply the first one to the vertical so top and bottom padding and then the second value to left and right so I'll show that here let's comment you out and do padding how about something really obvious like 10 pixels now how about 40 pixels top and bottom and 10 pixels left and right so that first value if there's only two of them the first one is top and bottom the second one is left and right if we pass in one value it's all four sides there is a shorthand for three of them I pretty much never use this because it's kind of confusing to remember which one is which apparently if you pass in three first value is for the top padding the last value is for bottom padding and the middle value is for left and right together but this is pretty common to see for right bottom left that order is important it's a clockwise order right at the top and the right and the bottom then the left this is pretty common to use so I'll show that let's do what should we do here padding top will be 10 pixels and then 20 pixels for the right 30 pixels for the bottom and 40 pixels for the left okay so 10 20 30 and 40 another thing that you'll see is padding zero which is just a way of saying no padding for example if I add in a button here and this button just says hi it's an inline elements let me make it a bit larger are all buttons a little bit larger I'll give it a font size of 40 pixels okay so if you look at this button here I'll give it a border how about two pixels solid magenta that's the border there and if we look at it in the chrome dev tools you would see I won't even bother doing it you would see that there is a little bit of default padding I can remove that with just padding zero on all sides now we have no padding so that is something that you may want to do maybe not for a button but certain elements by default will have some usually not a whole lot but some padding remove it with padding 0 so to summarize that we have padding left top right and bottom as separate individual properties so that we can set we also have the more commonly used padding shorthand which accepts a single value two values three values or four values and just remember if you pass in four it's a clockwise so top right bottom and then left that is the order so that is padding the space between the content box and the border and that leads us to the final piece here which is margin so margin is the empty space between the border or the outside of one box or one element and other elements on the page so it's empty space it is kind of like the force field around an element that we can control we can do it on all four sides we can have left margin right margin no margin and just like with padding we have a shorthand margin property and we also have margin top margin left margin right and margin bottom so here's the docs on mdn for margin most commonly I use the margin shorthand property just like with padding we can provide one value to three or four values or we can just set it to zero which is the same thing it's just one value we also have separate margin top margin right margin bottom and margin left so back here in my code pen let's add margin to our images and I'll start with just setting margin on everything on all four sides to be 20 pixels and there we go you can see that they spaced out 20 pixels in between now if we actually inspect with the chrome dev tools let's take a look at one of them you can see that margin being highlighted in orange so this right here is 40 pixels in between I can't really highlight it because I'm just going to switch over to the left one but if you add up 20 pixels and 20 pixels we get 40 pixels of space between those images and then over here we've got 20 pixels on the left hand side so if I bring this open it up again a little bit further come on here we go where we have this inspector I can see content box on let's take which one of these images how about the middle image here which is this tiger image okay so we've got our content which is 300 pixels by 200 pixels then we have padding of 20 pixels on all sides then we have our border which is 2 pixels wide then we have 20 pixels of margin on all sides so we end up with 40 pixels between the two vertically at least when they're stacking right now and then we close that down 40 pixels between the two here so margin acts as that force field or the space around an element and we can set margin specifically on one side or two or three or four sides individually let's take the h1 and set margin bottom to be 100 pixels and you'll see that we have a lot more space now I could do that you know 300 pixels and then I could set margin left-left to be 100 pixels and you'll see that it shifts over 100 pixels so from that pink thing the edge of that border to over here is 100 pixels now I think there's actually a little bit of margin on the body by default let's see can you see that right there I think that's the body there's some orange we can reset that on the body and there's it's pretty common to use CSS reset style sheets because certain browsers have different styles that are default so if I set margin 0 on the body this should shift over a tiny bit and it does okay so that just removes all margin on all four sides let's see what else is there we have margin top bottom left and right we also have that same shorthand syntax where I can set I'm probably going to comment this out cuz it's so ugly not that anything is attractive on this page no commented out we also can pass in two values two margin so I could do 20 pixels vertically so top and bottom and then how about 10 pixels left and right so we can't really see the top and bottom margin very clearly but here we have 20 pixels of total space 10 pixels from each one 10 from the left of the turtle 10 from the right of mr. tiger I also can do all four so it's top right left and then bottom what will be easiest I think what might actually be easiest is if I call one of these images out how about this middle one I'll give it an ID of what should we do how about tiger and then I will remove margin from the others select tiger and then set margin to be how about 10 pixels on the top I'll do the same thing 20 on the right maybe 30 on the bottom and 40 on the left okay so we've got 10 pixels of margin up top we've got 20 on the right 30 on the bottom and then 40 on the left so it ends up sort of shifting upwards because of that bottom margin there's nothing below but if I did have content below or if I shrink this down let's see open up the dev tools just to shrink the window a bit you can see that margin a little bit clearer here so small margin up top slightly bigger on the right more on the bottom and the most margin on the left so that is margin again there are other units you can use m's percentages I'm not going to go into that here because I'd like to do a separate video on units in general it's kind of a complicated topic in CSS so pixels for now works just fine so we have padding and margin that both have a shorthand version that takes one two three or four different values we also have individual padding top left right bottom and margin top left right bottom padding is the space between the content box and the border margin is the force field or the space outside the border between one element and any other elements so that's the basics of the box model so now what I'd like to do is talk about some box model adjacent or relevant properties that aren't margin padding and border but that come into play and may be useful so the first one I'd like to show you is something called box sizing box sizing allows us to change how the width and height properties are calculated or or basically how they work for a given box so I'm gonna demonstrate a scenario first I'm gonna have a selector for all images when you hover over them let's add a bigger border so we've got a two pixel dashed black border let's do a border of five pixels solid what's it color I like how about Rebecca purple let's see how that looks okay so I'm hovering we get that purple border but do you see how everything is shifting around what's happening here is that we're setting the width of our content to be 200 by 300 pixels the image itself and then everything else is added on top of that so when I have a two pixel border which is what we have right now until I hover that grows to a five pixel border and that's going to shift everything else because we have that margin between our elements and that margin is not changing it's going to stay twenty pixels or whatever we set it to so when the border grows everything shifts around but using this property box sizing we can change how width and height are calculated instead of width and height setting the width and the height of the content box I can set box sizing to a value called border box which tells CSS that I want the width and height to be the entire content box plus the padding up until the border so if I set a width of 200 pixels I want that to go from one border to the other side not just the content box and that allows me to adjust the padding or adjust the thickness of a border without changing the size of the overall box so I'll show you that here let's set box sizing on all images to be border box and you'll see that things shrink down so this is now 200 by 300 pixels and you can see already it's working but the 200 by 300 is this entire box including the border and the padding and the content this can be useful not just for hover effects it can be useful in general if you're just trying to make something some size you know that you need your image to be exactly this size or your your div or whatever it is 500 by 500 pixels you can add padding and change padding and change borders thickness and all of that without actually impacting the dimensions of the overall box so that's box sizing the default value for box sizing is content box so if you needed to selectively undo this or just go back to the default its content - box and now that 200 by 300 pixels that I set for width and height is just this image on the inside the content box itself so as I hover that border grows everything shifts around so I'm going to go back to border box okay so that's the first property that I want to talk about it's box model relevant next up I'd like to show another property called background clip this allows us to decide where the background our content actually is or every in a given box is the background around the content box does it go to the edge of the border or does it go all the way around the border or to the outside of the border so I've added in three buttons at the bottom here inside of a div just so I can style them differently from this one button that I sent or that I set padding to be zero on and how do I want to do this here do I want to use an ID to style each one separately hmm well what I'm going to start with is by giving them all a background color so every button inside of a div which is just those three at the moment I'll give them a background color of how about olive okay so there's that color let's give them a slightly more attractive border how about border will be two pixels solid well I don't know if this is attractive but then maybe it goes a little bit better so I've got the Olive background and if I add in some padding to all of those buttons how about a padding of 20 pixels on all sides sure and I'm gonna make the border also dashed so that we can see exactly where that content goes to and I'm also going to make it more like five pixels we're not going for beauty here all right so you can see that the background right now I've set to Olive extends all the way to the outside edge of that border but we have a couple options for how we control that background clip so I'm going to select the first button in there div button and it's a bit clunky but I guess I'll do end of type so we'll take that first button and we'll give it a background clip of content - box and that is one of the options there are three options I'll show you content - box tells CSS or tells the browser I want the background only to extend around the inner content box so not the padding don't go up to the border just stop at that content box now I'm just going to duplicate this and go for the second button in that div and I'm not going to do content box I'm going to do padding box padding box will extend to the edge of the padding but not to the edge of the border or the outer edge of the border which as you probably have guessed by now if we use border - box that background extends all the way to the outside of the border border box is the default so there are three different options now there's also a fourth option which is newer it's still classified as experimental I believe on the MDN is it yes that little flask usually indicates experimental where we can contain the background or clip it so that it's only painted within the text of an element so this means that we can achieve effects like this where the text itself is not colored it's actually a transparent color for the text it's not black or red or anything like this text and there's a background but the background is only showing where that text is it's clips to the text so you can do this with an image you can do this with a gradient I'm not going to go into a whole lot around gradients or images as backgrounds right now but there's a website I like called UI gradients I'm just going to copy one of these gradients maybe this one here if I hit enter it gives me the code to copy this gradient so I'm just gonna copy that right there so I'll add in instead of a button I think I'll do this on an h2 and I'll do something like ooh look at me alright so there's my h2 and I'm going to select that h2 and I'm going to set the background to be this gradient that I copied from that website since we're not really talking about how gradients work right now but you can generally at least for this example see how it works you specify a direction so it's a gradient to the right and then we have three different colors there's a lot more to gradient so I'll do a separate video on it one day we have radial gradients repeating gradients you can set different proportions and there's a lot to them anyway my text right now is black I'm going to set the background clip to be text however this is not going to work Chrome if we go back to mdn and I scroll down you'll see in chrome it supports most things but it does not support text fully we get yellow which means partial support and it says this value is supported with a prefixed version of the property only so what we need to do is set this to be WebKit - background clip this is something that I haven't actually talked about in this course so far I'll do another video on prefixes and browsers and all of that but this is just how we can get this property to work in Chrome these prefixes are browser specific or technically they are browser engine specific anyway it doesn't really matter I just want to demonstrate this because it's kind of fun if I set the text color to now be transparent color transparent you can see that gradient there although we're not getting the full gradient because of that background extending all the way over here so why don't I set the width of my element to be maybe 200 pixels now that was too small how about 300 pixels and now we get that cool gradient effect let's also maybe make the font size a bit larger font size maybe 50 pixels okay there we go we now have another way a different option of clipping the background kind of an experiment but it's fun to see and this can be cool to have gradient text not with this fonts definitely not but it is pretty trendy these days to have a gradient text or a piece of text usually a heading so that is another one of those properties adjacent to the box model background clip now what I'd like to end with is talking about the difference between inline and block level elements in regards to the block the box model as well as a third option for display which is inline block so I've made a new code pen just to help me explain this without a bunch of other stuff going on and I've got a section which I don't really need for this example but I've got an h1 inside a button and a paragraph and that paragraph has a bunch of lorem ipsum text and it has a span inside as well so every single element in CSS is going to have some value set by default for its display property for example things like H ones or all headings and paragraph elements are block level elements so if I give the h1 a background color of pink we see that it extends all the way across this line so that box by default is going to fill the space available in its container which is this entire block all the way across basically goes as wide as the container it also means that it forces content onto a new line so this button here is not sharing the space it gets shoved down to its own area after this block level element but I can change that display on my h1 I could say display is inline which now makes it inline just like a button by default a button is an inline element so the box surrounding a inline element does not break onto a new line which we probably already know by now but in terms of the box model there are some significant differences between inline and block so with my h1 it has display of block by default I could just put that here just to be clearer I can set things like height I'll make it 200 or 100 pixels tall and it works the h1 the content height is increasing to 100 pixels but if I make this and inline elements it's not respecting it it doesn't care about that height that's how inline elements work inline elements do not listen to the height or the width that we set I can set width to be 200 or how about something like 400 pixels it doesn't matter I get set up to 4,000 pixels it's not being respected so that is how inline elements work if we take a look at this span down here and let's give it a different color to make it stand out a bit how about color of magenta there's the span I'm going to give it a border about 2 pixels solid cyan okay so there is the span right there spans our inline elements if I set display to block it's gonna take up its own block all the way across okay let's go back if I set a width to my span of 300 pixels it's ignored because it is an inline element but I still can do things like padding I can set padding to be 20 pixels or about 10 pixels to start that is respected right we do end up with the left and right padding and the top and bottom padding the space between the content and the border but if you notice what's happening here it's just overlapping the rest of the paragraph the rest of the content that would be there it's not forcing stuff to move around if that makes sense nothing is being pushed down this text just continues on its way if I did some margin on all sides margin of 10 pixels we end up with spacing on the left and right as well let's do something more extreme how about 30 pixels so we end up with margin left and right and top and bottom but it just doesn't do anything on the bottom here or on the top for that matter so that's because it's an inline element on an inline element the box model behaves slightly differently it makes sense if you want something to be in line like in the middle of some text if you set margin if you set padding you don't want your whole flow to be screwed up and for all of this text to move around or to have a bunch of empty space right there so that's how inline elements work compared to block level elements I'll go back to making that block I'll just remove now I'll just keep it there keep it block we can add padding margin whatever we want right I can do margin bottom of 200 pixels and that is respected everything moves down then there's a third option which is kind of in-between called inline block if I take this span and I set display to be inline block display inline dash block notice what happens now it doesn't take up its own line so it doesn't fully act like a block level element it's closer to an inline element in that sense but it does respect the width the height the margin on all sides the padding on all sides and the content is going to move around it based off of the margin in this case so I can give it a height or width and explicit with like 500 pixels which will be quite large and that actually works if I had set it to in line that is ignored because it's an inline element inline block is basically a hybrid it's a combination so it acts like a block level element in pretty much every way except for the fact that it doesn't take up an entire block or an entire line of content it doesn't force things onto a separate line so inline block can be useful if you have elements that you know you want them to share space and be in line but you also want to be able to control their margin and their padding or if you have something like a link or a button or a span where you need to explicitly set the width or the margin or the padding and have it be respected you can use inline block just a quick note display is a relatively complicated property everything we've been discussing is known as the outer display so it dictates how an element behaves the display if it's inline block or inline - block outside the element there's another option which is inner display which controls how the element behaves inside we're not going to talk about that now I'm gonna cover flexbox later on in a separate video and we'll see more about display but for now the three options we're covering or that we just covered our inline block and inline block all three of them behave slightly differently with regards to the box model well it's not even slightly the difference between inline and block is pretty substantial when it comes to setting a width or height having your margin respected on all sides inline block behaves mostly like a block level elements except our element does not take up its own line or it doesn't force content onto a new line afterwards lastly there is a homework assignment or a exercise activity do it yourself at home project whatever you want to call it there's an assignment you can find the link in the description to all of the code from today as well as homework in the homework solution so that I'm showing you right now is the homework solution I know it's not very beautiful but it does combine a lot of what we discussed today so what you'll see if you open up the actual exercise not the solution is this right here I'm giving you the HTML markup and I'm giving you some comments in the CSS but that's it and if you look at the actual content being rendered we've got a couple images that are massive and then we've got up top what is going to be a navbar some links and then at the bottom a forum with a username and a password field and a button so your job is to create this layout and some of the behavior the spacing the padding the margin all of that stuff that you can see in this solution I wouldn't worry too much about getting pixel-perfect down to you know exactly 20 pixels or 30 pixels in between these two I would just try and recreate it in general you know if you if you can get margin or padding where there needs to be margin or padding it doesn't really matter how much is there that's just a matter of changing a single number so don't drive yourself crazy trying to recreate it perfectly let's step through each piece the navbar here obviously is very different so we've got the elements are totally unchanged I didn't touch the HTML but they're now in a line here in addition there is a black line between each one of these links each anchor tag here now the way this is done is actually a little bit tricky and I'll tell you now it's a border but what's tricky about it is that this one does not have that border right or if you were doing it the other way if we were doing the left side left left left left there is no left side border for home so you have to use a little bit of a fancy CSS selector to say apply it to all of them and then oh wait on the last one no border or on the first one no border that's all I'll say about it you can look at the solution but I did mention this one has some slightly more challenging pieces then this is pretty much untouched we've got our three images who are drastically resized you can just pick a size I think I did 300 by 200 and don't worry about the colors here but we've got what looks to be two borders or a border and something else hint hint there's only one border that you can set on any element and it is not a box shadow I have not talked about box shadow if you're following this course so it is done using the properties that I specified in CSS or in the CSS comment these are the only properties I used so yeah if you didn't watch the entire video you may need to go back and see how to do this a couple things I'll mention don't worry about the hover effect if you'd like to put that in there by all means and then there is some spacing between them okay and then lastly we have the form which is pretty drastically different as well we end up with a form where we have each input on its own line and a button that takes up the entire bottom line it also has a different background color so the form itself just tell you this now the form itself is the wide thing and then each one of these elements inside the form is taking up the entire length or rather the entire width of that form so you'll need to set the width on the form the container itself and then work on each input and the button also this little line at the top that thick line is not on the input itself it's on the form all right also there's a bit of spacing don't forget that in between but don't go crazy worrying about the specific numbers the details of how many pixels or whatever just try and generally recreate this you can always look at the solution but you'll definitely get the most out of this if you attempt it on your own and and do it like my students in person would do it where we ask them to complete it on their own or do the best they can and then we discuss it in the morning the next day so that's pretty much it pretty long video we covered a lot some very essential pieces of CSS border padding margin those are absolutely crucial to pretty much anything you'll do in CSS and then we have box sizing border clipping not as crucial but can be kind of fun and it can be very useful in certain situations and then we learned a little bit about the display property at least some of the most common values block inline and inline block civically how they interact with the box model so thank you for watching I hope you enjoyed it or at least got something out of this video try the assignments leave some comments only if they're extremely nurturing and kind and loving and please consider sharing the series or this video with anyone you know like subscribe all that stuff have a great day stay safe wash your hands stay sane and I'll see you soon thank you

Channel: Colt Steele

Views: 29,064

Rating: 4.9658117 out of 5

Keywords:

Id: M1xEi_BBW1I

Length: 42min 43sec (2563 seconds)

Published: Mon Apr 06 2020