Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: CSS: Box model-concepts
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Let's look at some of the key concepts behind the CSS box model. As we saw there is basically four things that define the box.
0:08
First of all, what is the content's width and height, and then how much padding is there, how much of a border is there
0:16
and then how much of a margin is there. So the colors will help us understand this picture a little bit here.
0:20
The content is within the black box, background color of whatever it is we are focusing on the box model four, is white
0:28
and so this padding that sort of is the area outside of the black box. And then the border is blue, and then the margins are always transparent
0:37
and see through, so they define some space but nothing that you can visually see.
0:44
We also saw that the developer tools let you quickly and easily understand the box model so if you right-click on some element, you hover over it,
0:52
you can see the computed size with the regard to the box model and the top left here like it says LI 152.31 times 46
1:01
and if you pull up the computed box model settings you can actually see the exact pieces that make up the box model.
1:09
So this lets you visually understand the box model but how do you control it? Especially in CSS? Well, we can look at our CSS file and see,
1:17
so over here we have our site.css and we are going to style something with the lead class, and we can set the padding, the margin and the border,
1:25
you can either do this in a multistep way here we are setting the padding all the way around to be 5 on each side
1:31
and we are overwriting the padding on the left to be 10, so 10 on the left and 5 top, right, and bottom.
1:37
You can combine that all in one statement, but I always forget which is the top, which is the bottom, how many pieces you need
1:43
so I often want to be really explicit I'll say padding left for example or margin left something like that.
1:50
Here we are setting the margin and we are using 5 pixels all the way around, you can use any of the CSS measuring units, you can say 5 pixels,
1:56
you can say 5 em so 5 line heights, things like that, we are also setting the border, so the border here is 1 pixel, it's solid and it's gray
2:06
which looks very similar to the border on this code block that is on the screen right now actually. You can also set things like border radius
2:14
which will give the whole element sort of a rounded edge style which can be kind of nice sometimes. So this is how you control the box in CSS.