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