#100DaysOfWeb in Python Transcripts
Chapter: Days 13-16: CSS Layout and Design
Lecture: Demo: Box model
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Jump back to our design app play ground thing and look at the box model. So the idea of the box model is this controls how elements fit together.
0:11
So if I jump over here first it's going to tell you you know how much space around maybe this hyperlink there should be
0:19
how much padding, or even the table row you see the Grey thing. You know what is the padding? What are the margins?
0:25
So padding includes the background color. Margins of course excluded but they keep other stuff you know pushed away and so on.
0:32
So let's go back here to our box model. And here we've some content. Right this black box is the content and it's contained within a container
0:42
that has a gray background. Neither of them have any padding border, or margin. Let's go and play with that a little bit.
0:50
The padding and the border and margin both have colors so you'll be able to see. So if I set this to something super big like 10px.
1:00
You can see the border width is now 10 pixels. And that's the red part. It's you know made the container that contained it get a little bit bigger
1:07
because now the content within it itself is also bigger. We can also set the padding let's put that down to like one
1:16
maybe it's still hard to see still. Say three, there we go. Let's set the padding to 10. And there we have the background color of this thing
1:25
that we're setting the padding on. It's not quite gray, it's like a blueish it's a little pink here. Contains element we're not actually
1:32
setting the border on this we're setting the border on the thing that contains it. And we look at also like this in the dev tools.
1:38
So we've contained which is the black thing. Notice the design tool are really really helpful. Other thing we're setting with
1:46
has the background color of light blue is the inside and the outside is this black thing. Okay, so we're going to go and set the margin
1:55
also set the margin be 20. Here you can see, we got the overall thing that contains element with these property set has some space around it
2:04
and then it has a border and then it has the padding and then any other content in here. Typically you wouldn't do this we have the light blue
2:11
and then the content. Maybe it's an image or just something that's transparent. So you don't really see the padding up here so much
2:17
but I am going to make it super obvious. When your playing around with this what it is. So there's not a whole lot more to it
2:22
other than if we go and inspect element. We have this nice design tool that actually let's us see the box model right here.
2:30
And if we go click on the inside bit you can see right here the margin is 20 all the way around, and the padding is
2:38
10 all the way around. The internal element is 300x200, and the border right there is 3. And as you move around notice
2:46
as I scroll it up a little for you as I interact with it over here it actual highlights those elements. Additionally, like if you do it over here.
2:54
So you can do some really cool stuff to help understand the box model over here. And if this is being inherited you can go to the computer tab
3:01
and see you know where it's coming from and stuff like that. So definitely leverage the dev tools to help understand this. Come over here
3:08
I've built this little web-page for you also to play around and visual see it as well. And, of, one final thing. We can go over here
3:15
and set the values here. So I can turn off the padding that's being set by the page. I can change it to be 2 things like that.
3:26
So you can both visualize as well as play and enable all these little features, both.
3:33
You know this let's you play with regular web pages that don't have like giant input boxes to let you set these properties, right?
3:38
Alright, there is not a lot to the box model but understanding it is really important for designing how your page fits together, and how it looks, and
3:46
make sure everything is spaced just right. One final note on the CSS box model it does not apply to elements that have inline as their display.
3:56
So if we go over here to this thing. We change it, display, to inline. All of a sudden, look all the stuff falls apart. It looks totally weird, there's
4:07
I guess I probably maybe set that on the outside. I don't know. There's all kinds of stuff going wrong with this now that it's inline.
4:13
It has to be in my block or blocks something like that. Talk more about that in a minute.