Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Box model demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Now let's explore this thing called the CSS box model. Now, the box model lets you control how various items want to be placed,
0:10
next to other items, or elements on the screen. And there is a wide variety of things that we can set and work with,
0:17
a combination of basically margin, padding, orders, width, minimum width, and same for the height, as well as the display mode
0:26
which we'll get to in the next section in layout, but the box model works in conjunction with this display mode or layout.
0:34
So, we are going to look at the box part of it then we'll look at the layout next. The HTML we are working with is drop dead simple,
0:42
we have three things and these are divs, we'll change a few colors so that we can easily identify these pieces, and we'll go from there.
0:49
So here is what we have, we have an outside piece, we have an inside piece and the inside piece contains
0:55
a thing called "contained", and it has content. So the thing we will focus on is this inside piece, OK, how is it affected for by what is inside it,
1:06
and how does it affect its relationship with the outside as well as the contained element. So let's go and run this, and pull it up.
1:17
So we are going to go to the CSS box model, here you can see, let's go over to the CSS really quick,
1:23
we'll see the outside piece has a gray background, so that's this piece here, the content piece has a black background with yellow text,
1:32
so if we go down a little the content or the contained pieces, black background with yellow text.
1:37
And then, the inside piece, is light blue, with solid red border. Now you don't see the inside piece, do you?
1:48
Right now the margin is zero, the padding is zero and the border is zero
1:51
and so it basically has no other size defined for it, other than what it is containing,
1:58
and because of the containing thing is effectively on top in z order, you'll never see the color of the background thing.
2:05
And then, this gray thing here that is the full outside, you can see that around the edges you don't see any of that
2:12
inside piece that holds it contained showing up. So let's make a few changes here, so let's set the padding to 20 pixels
2:20
and we'll set the border and the margin to zero. So when we change the padding, that gives it extra space,
2:28
it has to be bigger to contain whatever it contains, so let's just do this. Now you actually see the blue, thing which is the inside element,
2:34
that's the thing we are applying this box model to, so it's got some size, which is defined by the content that it contains,
2:41
we could set it explicitly either through width or min width or things like that,
2:45
but if you don't do that, it's set more or less in this current form by the thing it contains. And then, it has to have 20 pixels extra on each side,
2:55
so this is on the inside, now, if we wanted it the other way, if we wanted just to leave some room around the edges but not show through,
3:02
not actually show the thing but just leave some space, we could switch it and we could let's make this 40 or whatever, right,
3:08
we could say look we need some extra room on the outside, and finally, we can go back here and set the border, normally
3:15
you will set to like 1 or 2 or something small but we'll set it to 10 so it's really obvious.
3:19
And now we have this border that goes around it, so let's do them all together, so we are going to have a padding of 30, sorry this is a margin,
3:25
we'll have the margin 30, with the padding of 10, and we'll have the border of just 1. We set those, you can see around each edge we have 30
3:34
and then right around it we have a border that comes next, which is the however big it is, in this case it's 1 pixel,
3:40
and then we have the padding, so you can actually see the thing that we are setting, which is the inside before you get to see its content.
3:48
So that's the CSS box model, and you can play around with these here and see what you get, now we are going to talk about the developer tools,
3:55
little bit more, but just while we are on the box model,
3:57
let me just pull this up and if I say "inspect element", it will show the developer tools for this,
4:01
and you can see I can choose different things like the CSS rules that apply and I can toggle them and so on,
4:08
but what I want to point out is that it has this box model here and if we go and find the right piece, not the contained but this thing
4:15
it will show you up here the actual size is 3.23 by 2.22 and the reason is the thing inside, the contain or the content is 300 by 200
4:27
and then we have padding and we have a border, and we have a margin. And you could actually see as I move around that it's highlighting this in the UI.
4:37
So to understand the CSS box model, you will want to play with these three values along with the display, which we are going to focus on next,
4:44
and the developer tools, as we get more in depth into them, are really good for understanding things like this various sizes
4:51
and box model settings that are applied here.