Hi. Today we're going to talk about the box model. And what the box model is, is really a general concept of CSS that helps you size and place your element where you want them to go. So, one of the first things we're gonna talk about is height and width. I know I've already used this a little bit in some of my other lectures, but I wanted to be very specific in how it works. And one of the first things you need to know is that the height and width of any inline element is the content itself. So, if you have a link, the height and width of that link is just the text of the clickable part of the link. Elements that are not inline, things that are block, inline block, things like that, they can take height and width properties, and we saw this in the Display lecture. So any time you have something that's inline, if you give it a height and a width, the browser just ignores it. Anything else, the browser goes great, I can go ahead and change that for you. Some of the other things we want to think about then, when we have elements, is how they fit on the screen. One of the easiest ways for you to strategically place things on your page is to put borders around them. Even if you don't want those borders later in your final product, I find it's very helpful to have this idea of how much space an element is taking up. So any element can have a border around it whether its inline, or block, or inline block. And those border properties specify what style border you want, what width of border and what color. They're pretty straightforward. The border style is the only one that must be specified. If you don't specify a color, or you don't specify a width, no problem. It'll default to black and probably one pixel. But you have to decide what kind of style you want. So, in this case, I've said, for all my divs, I want them to have a solid one pixel border around them, and I can't tell you what color that is, cuz I'm not quite that geeky yet, but I'd guess something like blue. The border style that you wanna specify, while most people always use solid, there's a lot of different styles. You can use dotted, dashed, grooved, ridged, hidden, inset, outset. There's a lot of different things you can do, and it's really kind of a stylistic difference on your part. I don't really pay much attention to them cuz I've always just used solid myself. Once you've decided what kind of style you want, you can specify the width and color. So when it comes time to set the width, if you decide to, is you can set it in a number of pixels or you can use the key words, thin, medium, or large. When it comes time to do the color, you can do the same thing we've been doing all along. You can just use the name, such as blue, the RGB value, the hex value, or just so you know, it's also transparent. So it can just take the color of whatever's underneath it. So when it comes time for you to specify how big you want your border to go, you can specify in four different ways. In the first example, you just give it one number. In this case, three pixels. And what it's going to do, is it's going to put a three pixel border around the entire element just like this. If you decide to give it two values, is it's going to set a three pixel border on the top and the bottom, and a ten pixel border on the left and the right. This is a really common way to set things up when you're doing borders and other properties, because it's a really nice shorthand that's still very simple to understand and read. If you give it three values, it's a little bit trickier, and I always stumble over what it is, so I'm gonna pop the picture up just to make sure. The first value is always the top. You want your top border to be 3 pixels. The 10 pixels is for the left and right, and the 20 pixels is for the bottom. The last one is when you give four values, and when you give four values, that basically means top, right, bottom, left. And that's going to set the border to four different values. So most people either use the one value, the four values, and a few people use the two values as well. Mostly, and one of the reasons I show this to you is, it can be really intimidating, and you're wondering what people are doing when they're going on. This is what they're doing. They're using shorthands so that they don't have to have border right, border left, border top, border bottom. Margin is basically that space that's outside of your border. It's between, when I say you and your neighbor, or what I should really say is between the element, and the element's neighbor. So it gives you that elbow room where you don't want anybody touching you. With margins, whenever you give it a positive margin, you're basically saying, move your element to the right or down. If you give it a negative margin, you're actually having it move closer to the neighbor. You are having it move left or upward. Padding is very similar in concept to margin, but instead this space is between the element and its border. It's giving it a little bit of extra space inside. You might almost think of it as squishing the text in some cases. In the same way, whenever you have positive values for padding, you're moving it outward from the element. You're giving it more space. If you give it a negative padding, you're actually moving the border close to or maybe even on top of the elements that are next to it. So with margin and padding, all you're going to do is give a numerical value. You're gonna give it something like 3 pixels or 10%. You don't give it any type of color. It's always gonna be transparent. The padding is always gonna be the same color as the element, and the margin's always gonna be the same color of the parent, probably the body of the page. They, just like the border, can be defined in that one to four values. So if you put margin three pixels, it will be a three pixel margin around everything. If you say padding, ten pixels, five pixels, you'll have top, bottom, left and right. So let me show you a quick picture of kind of what I'm talking about. In this case, here is my text is my actual element. I've said this is what I want to go on. The blue is the border around my element. The yellow is the padding. It's that space between my text and the border, and that orange is the margin, and what you're saying is, don't put me near anything else. Give me this much space around myself. So, it might move your paragraphs down. It might move your divs down and over. So, just practice this. And as you play with it more and more, it'll make more sense which one's a margin and which one's the padding. One of the things you need to understand when you're doing padding and border and margin, and all these things is that in HTML says, your height and your width is additive. And so what that means is if you decide that you want the width of your element to be 200 pixels, you probably need to take into account how big all those other aspects and properties are. So, in this case, part of the width is the margin, plus the border, plus the padding, plus the actual element with itself. And so it all really adds up to get what we consider the actual width of your element. And this is gonna matter when you're looking at your page and you're designing it and trying to decide how much space you want each element to take up. So if we look at this example right here where I have the width is 100px, the padding is 10px, the margin is 5px and the border is 1px. I'm hoping that right now, you're doing the math in your head, and I promise not to give much more math than this, but you're doing it to figure out how much width does this element, does this div, actually need on the page. And in this case the width is 132 pixels. The 100, plus 10, plus five, plus one, plus one, plus five, plus ten. It all adds up. The height, in the same way, is your height plus the top and bottom padding, top and bottom margin, and the top and bottom border. All right, so when we talk about margin, I just wanted to throw this slide in even though it doesn't mesh with a lot of the other things we've been necessary talking about. But it's because margin is very important for when you want to center elements on a page. When we want to center text, we could just use text align center, and everything looked really good. But when you want to center elements, it's a little bit more difficult. And so the default way to do this is to use the command margin zero auto. So if you remember, that first zero, that stands for top and bottom, and so it's going to not really care about that. The auto is what puts it left and right. Now this is only going to work if the element happens to be display:block, if the element is not floating, is the element has a width that's not auto, which means that you set it. And this last one is if the element is not fixed or absolute position. Now I haven't covered position yet. And so the good news is, since I haven't covered it, you probably haven't messed with it, and you don't have to worry about these two things. But as you try to send your elements, come back to this slide if you need to, and check these off to make sure that all these properties fit. And that's the best way to center things right now. Finally, when we talk about this I want to add one more option, and that's called box-sizing. And what box-sizing does is it takes some of the math out of that additive height and additive width. What your options are is you can have content-box, so box-sizing content-box, and that's just your default additive. You're gonna have to remember how much space you're using. The next one is called border-box. And border-box actually takes the width, the content, the padding, and the border all into consideration. So, if you say you want the width to be 200 pixels, it's not going to actually make the element 200 pixels. It's gonna make it 200 pixels minus the padding and border. One of the last things to remember is that we'll take into account padding and border, it won't take into account margin. So finally, one of the things I'm going to be showing you in this example in just a second, is different ways you can set the height and width of different elements. And there's two common ways to do this. The first one is called absolute, and that's when you set an element to a specific size. You say I want it to be so many pixels, or so many millimeters, or so many centimeters. Pixels is a very common way to set sizes. The other type of measurement is what I call fluid, and it sets the size relative to surrounding elements or the parent elements. So you can use things such as percent. You can use vw, which stands for viewport width, vh which stands for viewport height. You can even use things such as em and rem, which aren't commonly used, but they actually set the size relative to its parents. So let's go ahead and move to my example so we can play with this just a little bit. It's not gonna be enough to demonstrate everything that we can do, but hopefully it'll get you started. What I have here is a very simple HTML file where I have a left side and right side. But as you can see, they're not to the left and the right right now. They're just on top of each other. So the first thing I wanna know is, can you put these divs next to each other? We're gonna have to use a kind of combination of display, and height, and width, and padding. So let's go ahead and do that. So over here in my CSS file, right away you can see this kind of the background things I've done. Now, when you want things to be next to each other, you have to give them a width, because right now they take up 100%. One option would be for you to go ahead and set it to some sort of pixels. And say maybe 200 pixels and 200 pixels, and see what would happen, see if it works out. The problem with doing that, as I uncomment my code here, is that as people go on different browser sizes, your numbers might be too big or too small. So what I've done here is I went ahead and I set my width to 48%. Now doing that is really great, and I'm going to come out of this one line for just a second, because most people get that idea that you want to set the width to something smaller. What they forget, is that even though they're only taking up 48%, in fact I'll even just make it something really small. 20%, they're not going next to each other. So you need to remember that you want to use those fluid measurements. So let's go back here, I'm going to put it back to 40%. Even if you make it really skinny, until you tell the browser, oh, I know this is blocked but I'm going to change it to in-line block, it'll never let block elements be next to each other. So that's why you have to remember to do both of those elements. So let's go ahead and save and reload. And so you can see that I've gone ahead and I've done my width. I've done my display block. I've got my padding. I've got my border, and I've got some margin. So last thing I'm gonna do, just to end this up to show you what's going on, is I'm gonna go ahead and change this to 50%, because this is a really common mistake people make. They say oh, I want two things next to each other. So I'm gonna make them each 50%. Don't forget when you do that, it doesn't work because that's 50% before you put the border into account. So make sure that you're playing with all these things, that you're playing with the margin, you're playing with the padding, you're playing with the border. Cuz that's how you're gonna get things to work, by tweaking, tweaking, tweaking. So let's go ahead and review. When it comes time for you to start implementing all these ideas, your box model with your padding, content, margin, etc., you really wanna design sketches on paper first, cuz it's really hard to shove things in after you've already come up with an outline, all right? So design first, code second. The second thing you might wanna do is use the box model to reduce the complexity of your code. Or at least the complexity of your math trying to figure out what things fit where. Finally, no matter what you do, you need to remember that margin always has to be considered. It can be tricky when you first start trying to put your page together, and getting things to go exactly where you want them to go, and we haven't even talked about positioning yet, which would be even another element. So for right now, practice these things in small ways. Use Inspect Element to play with it and not have to change your code so much. Until you get things looking just the way you want them to look. And don't worry, we're all making mistakes. We're all doing this together. But I think your page is hopefully getting closer and closer to something that you would really want to put out on the web. Good job.
