The Box Model

[00:00:01]
>> Jen Kramer: What we're gonna talk about today we're gonna talk about box models, we're gonna talk about the display property. We're gonna talk about how to make your navigation bar so that they go horizontal, vertical, look pretty, we're gonna talk about floats and we're gonna talk about flex box.

[00:00:16]
That is about five weeks of material we're gonna cover, [LAUGH], which is why we need to go a little bit long today. And then I have a project for you at the end of all this, that's gonna combine everything that I've talked to you about today. And you'll be able to put that together into one document it's gonna be a blog website that you're gonna lay out, sound good?

[00:00:38]
So that is the roadmap for today. So we are gonna rely heavily on our website here at frontendmasters.github.io/bootcamp be sure to click on the third link for layout and we're gonna be working from this today. And there's links in here, a lot of links to CodePens that we're gonna work with rather than doing so much in the VS Code, we're gonna do more with CodePen today.

[00:01:05]
So let's go ahead and get started then, we are taking a look at that website, and the very first thing that I have here for you is a diagram, okay, and this diagram is a diagram of the so-called box model in CSS. Every single HTML element anywhere on your webpage has a box around it, that's all your website is, it's boxes and boxes and boxes and boxes.

[00:01:32]
And the boxes are everywhere and you can never get away from them, okay? There are no circles, there are no triangles, there are only boxes in CSS and every box around every element has three properties, that we're going to discuss in great detail today, so these three properties are the margin the border and padding.

[00:01:57]
So border is the easy one, right? We did a little bit of work with border yesterday that puts the pretty line around whatever it is that we're working with, so that one's pretty straightforward. Border can be put together in a whole bunch of different ways, you can have just one border in which case that would make what?

[00:02:12]
If you only had a border on one side, that would be a?
>> Speaker 2: Line.
>> Jen Kramer: A line, [LAUGH] okay, so you can put a border just on one side and make a line with it. You can put it on two sides and make parallel lines maybe, yeah? You can put it two going this way.

[00:02:30]
You can put it on three sides. So we'll talk about all the ways to do that. There is the distance between the actual content, whatever you have, whether it's words or pictures, the distance between that content and the border is called padding, okay, that's padding. So if you don't want your border smashed up against your picture, you want a little breathing space.

[00:02:52]
You don't want your border smashed up against your text, you want a little breathing space. You do that with padding and once again, padding can be on one side, two sides, all the sides, we'll talk about how to do that too. And then finally, margin is the space between the border and the rest of your web page, so that's the space outside.

[00:03:11]
So some of you yesterday wanted to put space, wanted to have one big box here and I wanna have a space, and I wanna have a box here. Margin is gonna be responsible for that space in between those boxes, all right? So that's how we define margin, padding, and border and I will show you here on the webpage just so that you have this for reference.

[00:03:37]
We've talked about all of these properties here in great detail, you can scroll through all this wonderful stuff about padding, margin width, read about it in detail. And so with that I'm gonna go ahead and start with the CodePen, so back at the top of that, there is a CodePen here, just above that graphic, go ahead and click that link.

[00:04:05]
>> Jen Kramer: And it doesn't open in a new window, so I'm gonna open mine in a new window, okay, [COUGH] and it's a very simple little CodePen that we have going on here.