Up next in 10
CSS Tutorial For Beginners 36 - The Box Model
1K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore the box model, a fundamental concept in web development that governs the layout and sizing of HTML elements. The video likely covers the components of the box model, including content, padding, border, and margin, and how these components interact to determine the overall dimensions and spacing of an element. Viewers can expect to learn how to use CSS properties such as width, height, padding, border, and margin to control the box model and create visually appealing and well-structured layouts. Practical examples and demonstrations may be included to illustrate the application of the box model in CSS styling. This tutorial serves as a foundational resource for beginners seeking to understand the underlying principles of layout and spacing in web design using CSS.
View Video Transcript
0:00
Yo guys, what the hell is going on? You're watching CSS for Beginners lesson 36
0:11
and in this video we're going to dive right into the box model. That's coming up
0:16
Alright then, so what exactly is this box model? Well, the box model is a
0:20
way that elements represent themselves on a page in terms of space, okay? And say
0:26
for example we have an element in the middle. Any block level element could be a P tag, and we give that P tag a specific width and a specific height
0:33
That's going to control the horizontal and vertical spacing that that element
0:38
takes up on a page, right? Now in addition to that we have a few other properties
0:42
which control its spacing also. And the first thing is the padding, which is an
0:46
internal spacing, okay? So within the boundaries of that element it has
0:50
padding from the element edge. And the element edge itself can have a border
0:55
can be one pixel thick, and that's the grey line here by the way, or 20 pixels
0:59
thick, however thick you want it to be. That also controls the space within the
1:02
document. And finally we've got this margin property, which we saw in the last lesson, which controls the space between different elements on a page, okay? So
1:10
that's the box model at a glance. What we're going to do now is jump into the code and have a look at an example
1:17
Alright guys, so here I am back in the code, and as you can see I've replaced the previous content with these two div tags here. They've both got a class of box, and then
1:25
just this little bit of text in the div tags too, okay? Now I'll give this class
1:29
of box a few different properties. The first one is the margin of 30 pixels
1:33
remember that's the external kind of space in between elements. The second one
1:38
is the padding, which is the internal space, and that's got a padding of 30
1:41
pixels. The third one is the border, and I'm saying I want that to be solid, and
1:45
one pixel thick, and color of 0 0 0 in hex code, which is black. And then I want
1:52
it to have a width of 400 pixels and a height of 200 pixels. So we've got two of
1:56
those box classes, and we're going to look at this now in a browser
2:04
Alright, so you can see now this is the border, the content in between, and we
2:09
can't see specifically how big the margins are, how big the padding is, you
2:14
know, the width, that kind of thing. But Google browser, Chrome browser, has this
2:18
cool thing within its dev tools. So we go down to inspect element on this, and if
2:23
we hover over one of these elements, now we can see here, okay, the blue box in the
2:28
middle, that is the content height and width, okay, so that's the how I think it
2:35
was 400 by 200, there it is, 400 by 200 pixels. That blue box represents that
2:40
space, okay. Now the green color on there represents the padding, and that's 20
2:45
pixels. So you can see all around the blue, we've got padding of 20 pixels, and then just beyond that is the border, you can see that faint line, that's one pixel
2:54
and then all around that, it's a margin of 20 pixels. Now you might look at the
2:58
right-hand side of that and say, well, hang on, that's a huge margin on the right-hand
3:02
side, and that's because there's nothing else in that space. So automatically, you
3:06
know, it's applying that margin. Because this is a block level element, each block
3:12
level element occupies its own space in the document on top of each other, so
3:16
it's occupying all the space on that row, if you like, okay, so it's using a margin
3:21
to kind of fill up that space. So that is the box model in action, and Google Chrome
3:26
also has this cool thing down here, you can see the box model down here in more detail, and you can see the main content here in blue is 400 by 200 pixels, then
3:36
if I hover over this bit here, it goes green, that's the padding of 30 pixels
3:41
the border is one pixel thick, and then the margin is 30 pixels thick, okay? Now
3:48
then, you may be looking at this and thinking, well, we've got two elements
3:52
here, okay, and when I'm hovering over the margin, you can see that this space
3:57
here, okay, when I hover over it again, is 30 pixels in height, okay, that margin
4:04
Now, we've got 30 pixels on the bottom one as well. How is it we've not got 60
4:08
pixels in total between the two elements? Because we've got 30 on this
4:12
one and 30 on this one. Well, that is a thing called the vertical margin collapse
4:17
and I'm not going to cover that now, I'm going to do that in a lesson coming up
4:21
in the future. But essentially, what happens is when you've got two vertical
4:25
margins, they collapse and the higher of the two is taken as the margin, okay? I'll
4:30
go through this later in more detail in a different video, I just want to give
4:33
you a brief overview now. Okay, so that's the box model in action, what I'm going
4:38
to do now is just see what happens when we take off the width properties and the
4:42
height properties. So, let's get these two properties here and delete them. So, we're
4:48
not specifying a width and we're not specifying a height, so let's open this back up in the browser, see what's gone on. Alright, so what's happened here is
4:58
the elements have stretched to essentially fill the horizontal space here, and that's because they're block level elements, and essentially every
5:06
block level element occupies its own space in the document and takes up, if
5:11
you don't specify the width or height property, a width of the full kind of
5:16
document width there. So, if we inspect this element again, you can see now we've
5:21
got the margin, okay, of 20 pixels, we've got the padding, sorry, 30 pixels, the
5:26
padding of 30 pixels, then the content is the thin blue strip in the middle, okay? So, the height is specified automatically by the height of the content, which is
5:34
just the 12 or 14 pixels of height that the P tag is, okay? So, they're
5:40
taking up the full width of the parent element, okay? So, that's what happens
5:45
when you don't specify a width. Now, this is not to be confused with putting width
5:50
100% because that will be slightly different, and I'll show you what I mean, okay? Although that's, oops, although this here is essentially occupying 100
5:59
of this width here, apart from the margin which you specified, if we put
6:04
specifically a width of 100%, you would expect that to be the same, right? Let's
6:10
view it in a browser and see what happens. Okay, now you can see it's gone
6:16
over, and you might be sitting there thinking, well, what, you know, I've specified a width of 100%, what the hell is happening here? And this is what a lot
6:23
of designers start out doing when they first start with CSS, and they get
6:27
confused with the box model. And the reason it's doing this is because this
6:31
width here, if we right-click, this blue width here is giving itself a width of
6:39
100%, okay? So, just the blue bit, okay? And 100% would be, oops, all of this area
6:47
here, right? All of this parent element width. So, it's giving itself that full
6:51
100% width. Now, on top of that, it's got the padding of 30 pixels, the border of
6:56
one pixel, and the margin of 30 pixels as well, okay? So, it's actually 100% plus
7:02
all of that other stuff which is causing it to overflow here, all right? So, when we
7:07
say width 200 pixels, the overall width is not 200 pixels, that's just the width
7:13
of that little blue bit in the middle, the actual content. On top of that, we've
7:17
got 30 pixels on each side of margin, so 30 pixels on the left, 30 pixels on the
7:23
right, and then we've got padding of 30 pixels on the left and 30 pixels on the
7:28
right, and then we've got this border of one pixel on the left and one pixel on
7:32
the right. So, in total, it's essentially 200 in width plus 30 on the left margin
7:38
30 on the right margin, plus 30 on the left padding, plus 30 on the right
7:43
padding, plus one pixel border on the left, plus one pixel border on the right
7:48
So, the overall width there is all of this combined, which is 260, 320, 322
7:55
pixels, right? Okay? So, you have to be really careful when you're specifying
8:00
your widths and your padding, just pay attention to all the different
8:04
properties you're applying to it. So, let's just kind of view this in a browser
8:07
see if that totting or padding up. It's at 322 pixels. So, let's see if we right-click
8:14
this and we hover over it. You can see now it's saying 262 pixels. However
8:21
that's just taking into account the border, the content of 200 pixels and the
8:26
padding of 30 pixels. It's not showing you the additional 30 pixels of margin
8:31
on each side. So, we'd add that additional 60 pixels, that's making it then 322
8:35
pixels. Okay? So, this might be a little complicated at first to get your
8:40
head around, but just refer back to Google Chrome DevTools if you're ever
8:45
wondering why things are overflowing and it specifies here for you exactly what's
8:51
going on. Okay? So, you're probably going to have a few questions about this. If you
8:56
have any of those, feel free to comment down below and I'll answer all of those as soon as I can. If not, please like, subscribe or share if you enjoyed these
9:05
videos and I'll see you guys in the next video where we're going to look at the margin a little more in depth. I'll see you guys then
#Computer Science
#Engineering & Technology
#Physics
#Software