Up next in 10
Learn CSS Box Model In 8 Minutes
312 views
Feb 7, 2024
"Learn CSS Box Model In 8 Minutes" is a concise tutorial video designed to teach viewers the fundamental concepts of the CSS box model in a short span of time. The box model is a critical aspect of CSS layout design, defining the spacing and dimensions of elements on a webpage. In just 8 minutes, viewers are guided through the key components of the box model, including content, padding, borders, and margins. Through clear explanations and visual demonstrations, viewers gain a solid understanding of how to manipulate these properties to control the layout and appearance of elements on their webpages. Whether you're a beginner looking to grasp the basics of CSS or a developer seeking a quick refresher, this video provides a quick and effective overview of the CSS box model.
View Video Transcript
0:00
In today's video, I'm going to be covering every part of the box model so that you can easily
0:04
understand how to position elements using width, padding, border, and margin in CSS
0:09
Let's get started now. To get started, I just have two boxes off to the side here with the text 1 and 2, and background
0:19
colors of red and blue, and these boxes are represented in the CSS as box 1 and box 2
0:24
I've also removed all padding and margin from the page so that our boxes are pushed right to the
0:28
corners of the page. And to get started explaining the box model in CSS is to understand that everything in
0:35
CSS is a box of either a rectangular shape or a square shape
0:39
And it doesn't matter what you have in CSS. It's a box. Whether it's text, a button, a div, a span, every single element in CSS is a box
0:48
And these boxes have different parts. You have the actual content of the box, which in our case is this text 1 and this text 2
0:56
You have the padding of the box. And then you have the border and the margin
1:00
And we're going to go through all of these different sections and how they interact to form the box model
1:05
So the easiest thing to understand is the actual content of the box
1:09
If you do nothing to a box at all, the content of the box is just going to fill up the space
1:13
inside of the box and the box will be no larger than the content
1:17
But if you start adding different things to the box, then you can start to expand the size
1:21
of your box. So for example, one of the easiest ways to make your box bigger is to use padding
1:26
So let's add padding to this element. We'll just add 20 pixels to box 1
1:30
If we say that, you see that our box is increased by 20 pixels on all sides
1:35
Everything is pushed away from this one text by 20 pixels. And that is because padding occurs inside of the background of the element
1:44
It occurs inside the border essentially, and it goes around the content of the element
1:49
So the content is the very most inside thing in the box model
1:53
Then we have padding next, which will include the background color of an element
1:56
element So most buttons in CSS are styled using padding so that the background of the button becomes wider than the actual text of the button itself The next thing we can talk about is the border of an element So if we change this border size here to also be 20 pixels it going to be a nice purple color
2:13
We can see that we get this nice purple border that goes around the padding of our element
2:17
So we have our 20 pixels of padding around our content, and then we have 20 pixels of border around the padding, which is around our content
2:24
And the very last thing that we can have on our element is margin
2:28
So if we just add 20 pixels of margin to our element, you can see that is spacing on the outside of our border and
2:34
margin is what we usually use to space two elements apart from each other
2:38
Padding is mostly used to add background to an element to make it go around the content and margin is specifically to go around
2:45
two different items to make them spaced apart from each other. So now it's changed these values so that we can see the difference between them
2:51
So we'll just make them all completely different if we say that you see that we now get this element here
2:56
And if we right click on this and go down to inspect, we can see the different styles
3:01
So if we click on this computed tab, we can see using Chrome Dev tools all the different
3:06
sections of the box model. This rectangle right here is the box model
3:10
And on the inside, this blue section, this is the actual content of our box
3:15
As you can see, it's the thing that surrounds the one when we highlight it. You can see that it is just the very intersection content of our box
3:21
We can specify distinct sizes of our content using the height and width property
3:26
So if we set a height here of 100 pixels and we set a width of 100 pixels, you can see that
3:34
we now have a 100 by 100 square, and this blue section is that 100 by 100
3:40
Next we have padding, which is this greenish color that you can see, and as you can see
3:44
it's 10 pixels that goes directly around the word 1. You can see it just barely touches it, so this is just around the content, and it also goes
3:52
outside of that height and width that we've defined. This is that purple border, which we can see by hovering over here, and it's around the padding
3:59
as I've said. And then lastly this margin which goes around the element itself on the outside of the border and it used to break apart two elements from each other So now let do a similar thing to box number two We actually just copy all this code down to box number two We paste here we remove the margin for now
4:17
and we'll save that, and we see that our box number two is showing up right here
4:21
And now if we add a margin of 60 pixels to this box
4:26
you would think that the box would end up moving down because it needs to move 60 pixels further away from box one
4:32
But if we save that, you see that it doesn't actually move further away, and that this 60 pixel margin is the same between these two elements
4:40
There's only 60 pixels here and not 120 like you would expect
4:44
And that's because in the box model, margin actually collapses between two elements that are
4:50
next to each other. So since these elements are right next to each other, and they both share a margin
4:55
whichever margin is the largest is the one that will be used. So if we change this to 70, for example, they now have 70 pixels of margin between them
5:03
and even if we decrease this down to zero, you can see that it still has that 70 pixels of margin between them
5:09
but if we make this 100, it now has 100 between these two elements
5:13
And you can see that by just hovering over here, we see that 100 margin. And if we select Box 2, it has that 70 margin
5:19
but only 30 more between here and here, because this is a 100 margin between the elements
5:24
Another thing to note is that if we hover over Box 1 here, you can see down in the bottom left
5:29
it says that the height and width is 180 by 180, but we actually defined our height and width to be 100 by 100
5:36
And that's because by default, in the box model, to get the height of an element, it adds together the height
5:41
plus it adds together the padding on the top and bottom. So in our case, 10 on the top, 10 on the bottom would be 20
5:46
So we're at 120. It does the same thing with the border on the top of the bottom. So we have 30 top bottom, which would make it 60
5:52
So now we're at 180 right here, and that's how we get 180 as the height
5:56
Margin doesn't account into the height of an actual element for sizing using CSS by default
6:02
But if we wanted to change this so that our height and width right here are the actual heightened width of our element
6:08
What we would need to use is we need to change the box sizing of our element to be border box and what border box does is it makes this heightened width account for the padding and the margin or the padding and the border of our element
6:22
So let's change this border down to 20 pixels so it's a little bit smaller. And if you save that, you see that if we go to our box number one, our content section is
6:30
only 40 by 40. In the other example without this border box here, you can see it's the heighten width 100
6:36
by 100. But when we use border box, the actual size of the content
6:41
get subtracted out from the border and the padding so that when we hover over this you see
6:46
our actual element is 100 by 100. Instead of adding all of these, it just uses this height and this width, and the border and
6:53
padding just cut into that height and width. As you can see, our padding is still there and our border is still there, but the actual content
7:00
of our element was shrunk down to be 40 by 40 so that the overall element, everything inside
7:06
of the border, is a total of 100 pixels instead of being 180
7:10
When it comes to learning the box model, the easiest way to do it is to use these Chrome DevTools
7:15
and you can see each of the different sections of your element from the content, padding
7:19
border, and margin. And it even has a nice little diagram so you can easily tell what is what and what you're
7:24
actually defining. But some good notes to take away is that if you want to space two elements away from each
7:30
other, use margin. That is definitely the best way to do it using CSS
7:34
And if you want to space out an element from itself, you need to use padding because padding
7:38
is inside the border, which will include the background color, and margin is outside the border
7:43
And that's really all there is to the box model in CSS. One thing that you may notice is that we use this border box property, and this is something
7:50
that is almost always used in CSS because it makes styling things so much easier
7:55
So many times, this will get added to the universal selector so that every element will use
7:59
border box because it's so much easier when whatever you write as the heighten width is the actual
8:04
heighten width of the element, and you don't have to worry about doing math in your head when
8:08
you make these values. So I hope you guys enjoyed this video. If you did, please make sure to
8:12
subscribe to the channel for more content just like this, and check on my other CSS-related videos
8:17
which are going to be linked over here. Thank you guys very much for watching, and have a good day