Up next in 10
CSS Box Model, Box Sizing, Google Chrome Developer Tools | CSS Course for Beginners
1K views
Oct 16, 2024
CSS Course for Beginners: CSS Box Model. In this video, you'll learn about CSS Box Model, Box Sizing, and Google Chrome Developer Tools. Get Certification in Web Development: https://www.tutorialspoint.com/certification/web-developer-guide-for-2022/index.asp Use coupon ""YOUTUBE12"" to get “FLAT 12%’’ OFF at Checkout. Quality Learning to UPSKILL yourself only at TutorialsPoint. Timestamps: 00:00 Introduction 00:23 CSS Box Model 05:01 Google Chrome developer tools 07:08 box sizing property 11:25 border box vs content box More on CSS Box Model: https://www.tutorialspoint.com/css/css_boxmodel.htm More on Chrome Developer Tools: https://developer.chrome.com/docs/devtools/open More on CSS box sizing: https://www.tutorialspoint.com/css/css_box_sizing.htm In this CSS course for beginners, you’ll learn important CSS concepts step by step to help build beautiful, responsive websites. This series will cover essential topics like Flexbox, Positioning, the Box Model, Layout, Typography, Colors, Project, and more to help you master web design. Whether you're new to coding or looking to refine your skills, this course will guide you through each concept simply, ensuring a strong foundation in CSS.
View Video Transcript
0:00
Hello and welcome to Tutorials Point. We are continuing our CSS video series
0:04
Now, in this video, we are going to learn about box model
0:08
We will learn how box model comprises of content, padding, border, margin
0:12
Also, we will use dev tools to inspect our CSS. And I'll teach you how to use the dev tools to inspect your website
0:20
So without wasting time, let's get started. So here, I have created a folder called as Chapter 3, and I have created two files in it
0:27
index.html and style.cassus. And I have opened both of these files here
0:33
As you can see, we have nothing in the style.cassus and this is our index.comdh HTML with just a H1 tag saying box model
0:39
Now, first of all, we'll talk about what is padding. Earlier, we saw
0:43
what margin is in the last video. In this video, we will talk about padding first
0:47
and then we'll move to box model to understand it, right? So let's say I will create
0:51
a deal. Okay. And let it Let it have any content in it. Let's say box. All right. I'll just save it and the box text will appear here. Let's target this too. And for this two, I will have a font size of 30 pixels. Okay, a font size of 30 pixels. You may also say a border. Let's give it a border of one pixel. Solid black. And as you can see, it has a border. Now there is something called as padding, which basically gives the spacing between the content
1:25
and the border of this element. For example, I'm going to tell you padding
1:31
If I write padding of 20 pixels and save it, as you can see, it gives spacing
1:37
Spacing between what? Between the border, this border and this content named box, right
1:43
So there is a space. As you can see, from the left we have 20, from the top we have 20, from the bottom we have 20
1:49
and from the right as well, we have 20 pixels. So any element has margin as well as padding
1:56
So if I give this margin of 20 pixels, as you can see
2:01
the margin is alongside the border. As you can see, we have a margin from top, left, right and bottom
2:08
All right. Now I'll tell you about the box model. To understand the CSS box model, I'm going to quickly open my whiteboard here
2:19
Now here, inside my whiteboard, I'm going to. to give you a very simple example
2:23
For example, we write any text. Earlier, we wrote a H1. Let's say that was box
2:29
All right, this was the text called as box. Now, this will be called the content
2:34
This content will have some width and height. So this will be the width, anything, any pixels, let's say two pixels, is going to be the width
2:42
And it has a height as well. So the height is going to be something as, let's say, two pixels
2:49
For now, I'm just assuming. So this will be called as the content
2:53
Okay, after the content, we have something called as padding. So I'm going to make a box quickly, something like this
3:00
Now, to have spacing here, we earlier gave something called as padding
3:05
So I'll write padding here. Now, after the padding, we had something else
3:11
If you did remember, I'm going to write it here, it was border. So this is the padding area
3:16
First, we have this content area. let me just to write down content quickly then we have this padding area the next area we have is for the border that we gave earlier you know that border one pixel solid black so i'm going to write here border right and then after the border the next is for the margin and then and that margin we have already known in the earlier video that margin is used to create space between elements on our web page all right so this
3:48
is going to be our margin. So exactly what this CSS box model is
3:54
you have first the content where you can have some text or any of the element which will have a height and a width
4:00
And then after that you have padding Okay After that you have padding And after the padding you have margin as well Just like after the padding we have border and then finally we have the margin
4:14
Okay. Now, let's go back to CSS box model. Let's go back to the web browser where we can easily inspect this with the help of developer tools
4:23
Now I am back in my browser and here you can see we have this deal that has the content box inside
4:29
right so before quickly moving to developer tools what i'm going to do is i'll give it a width let's say
4:35
a width of 300 pixels something like this and we will also give it some height uh height of 200
4:41
pixels okay so we have width we have height earlier we saw in the white board after width and height
4:47
what we are what are what do we have we have the padding so let me just move the padding here
4:51
so that you can see it in order and let's just put the font size above so we had the width height then we
4:57
had the padding and then we go to the border and then we have the margin. Let me save it
5:01
Now, to open developer tools, there is a shortcut called as Control Shift I on your keyboard
5:07
You can use Control Shift I to open the developer tools or another way is to right click anywhere on your browser and click on this inspect
5:16
Once you click on Inspect, as you can see, the developer tools will open. These are the developer tools
5:20
This is basically your all HTML code, your HTML tree we call it
5:25
This is basically called as the DOM short form for Dog. document object model where we can see our whole HTML document are all the elements there. Right
5:34
For example, I have selected the box here. As you can see the body
5:38
Now, once I select the box here, as you can see all the styling of the box appears on this right side
5:43
We have the font size, width, height, padding, model box, right? And also we have the CSS box model where we can easily visualize all of the measurements for our particular box
5:55
We can also use this, as you can see here, select an element
5:58
it says select an element in the page to inspect it. I'll click on it. And as you can see, when we hover about anything, we see different colors
6:06
As you can see, this blue color first, this shows the content. All right, this shows the content
6:11
Then we have this green color, right? This green color shows what? The padding
6:15
And then we have this black color 1PX border that we already gave. And then the orange color here basically shows us the margin
6:24
Okay, so this is nothing but CSS box model. So you need to understand everything
6:28
you see on any website on the internet is essentially a box, a rectangular box
6:33
That's how CSS works. So now, if we click on it, as you can see here, we have the CSS box model
6:42
We have our widths and height. As you can see, for this, as you can see here, the width is 300
6:47
Height is 200. Then we have the padding from all sides, 20, 2020, 2020
6:52
Then we had the border. We have one pixels, which is almost close to 0.8 is almost close to 1 pixel
6:58
we have these borders and then finally we have this margin of 20 pixels on all the four sizes so this is a CSS box model now one thing to note here is that we have set the width to 300 pixels and the height to 200 pixels now one of the properties in CSS is I'm going to write it down here is called as the box sizing and when I hit enter the box sizing has two options initially border box or content box I'll have the content box first and I'll see
7:28
save it and we don't need this property. Why? Because by default it is already applied. So even
7:33
if I comment it out, there will be no changes. So by default, all the elements in our browser
7:38
will have this content box property. What does it mean? It means that the width assigned to this
7:44
do will be 300 pixels and height assigned will be 200 pixels. Now watch this. If I change this content
7:51
blocks property, first of all, notice this box model here in the dev tools. As you can see
7:56
the width is 300 and the height is 200 then we have separate paddings and separate borders right but now if I change this box sizing to border box and I save it as you can see there will be changing in the width and height of our div Why is that Let me just tell you it because when we specify this property of box sizing and we set it to border box
8:20
this is basically that we are telling the browser to include the padding and border measurements inside our width and height
8:29
So therefore, now the width of this element is not going to be 300 pixels
8:34
no, it will be equal to width. It will, this 300 pixels basically will include the padding of 20 pixels as well as the border of 1 pixels
8:45
That is why here in the dev tools, this size is adjusted accordingly. So if you calculate here, the width is 258.4 plus this 20 plus 0.8 from this side and this plus 20 as well, which is equal to 300 itself
9:01
Similarly, for the height, we have set the height to 200 pixels
9:04
So the total height including padding and border will be 200 pixels
9:09
How you can check here in the border in the box itself
9:13
As you can see, the height here is 158.4 plus 20 padding from down, plus 20 padding from top, plus border point eight from top and border point eight from bottom
9:25
And it is equal to 200 in total. Now one thing to notice here is that the margin is not included in the total width or height of any area
9:34
element in HTML, right? So you remember this. When box sizing is set to, is basically set
9:41
equivalent to border box, then the width and height of the element includes padding as well as
9:47
border but not margin. All right. So in short, let's just understand this. If we delete this one
9:53
or if I comment it out and save it, nothing will happen because by default, the box sizing is
10:00
set to content box. Now, what will happen here is the total weight
10:04
width of this dew will be equal to its width 300 pixels plus 20 pixels on right and 20 pixels
10:12
on left and this one pixel border on right and one pixel border on left which will be equal to
10:19
342 pixels to be precise right similarly for the height the height of this two element will be equal to
10:26
200 pixels plus 20 padding on the top padding on the bottom so that that basically gives us how much
10:34
140 pixels and then one px border from top one px border from bottom and that will be equal to how much it will be equal to 242 pixels now this is in case of when box sizing is set to content box by default but now if the box sizing is set to border box what will happen here the total width will be equal to 300 pixel which will include the right left padding of 20 20 20 pixels as well as the right left border of
11:04
of 1 1 pixels. Exactly. Similarly, the height will be total equal to 200 pixels here
11:11
which will include 20 pixel padding top and bottom, that is 40 pixels, and the top and bottom borders
11:19
of 1 pixel each, right? So this is how it works. Now, what I'm going to do is you may ask that what should we use
11:28
Should we use the default content box or should we use this border box
11:32
Let me just show you, let me just comment out this code for now we don't need it as well as this do i'm going to create a new deal here all right to
11:41
to demonstrate which one to use and in fact you will see on maximum of the web apps or websites
11:47
out there they will be using box sizing border box for their entire HTML so i will recommend
11:52
you to do the same now why is that let me tell you i will create a do and i will give it a class of
11:57
parent and now inside this view i will create another due and give it a class of child all right
12:04
And here in the parent let me have a text saying something like parent container, right, as the name says
12:13
And then this is going to be named child container So there is a parent container and inside parent we have a child container If I save it and refresh it as you can see we have a parent and child container
12:26
Now I'm going to write some style for it. I'm going to target my parent container first and let me give it some stuff
12:33
For example, the width, let's give it 400 pixels. I will give it a height of 400 pixel as well
12:40
And let's give it a background color of black. and let's give the text color of white
12:49
Alright, so I'll write white and save it. And as you can see, this is the parent container
12:55
Let me just put it a little bit down the developer tools, of course
13:00
So this is the parent container with this width and height and black color and white text
13:04
Now I will target this child container. And for this child container deal, what am I going to do is I am going to have some separations
13:12
I'll have it a height should be 300 pixels. If I save it, nothing will happen because I have to give it a color, right
13:19
So how about background color give it something like gray? If I save it, as you can see, now it is easily visible
13:25
There is a parent container that is black color. And inside that parent container, we have a child container that is gray color
13:32
Very well. Now, by default, it is of what is the box sizing
13:36
It is border box. Sorry, it is content box. Now, what will happen is watch this
13:42
I set the width to be 100% if I set the width of this child to be 100% this means so setting
13:50
the width 100% of this child container means that it's parents width if it is 400 pixels then
13:56
the child's width should be 100% of its parent's width that is the child's width should
14:01
also be 400 pixels that is what this width of 100% means now how can we have this what
14:08
I'm going to do is I'm going to give it a color all right
14:12
let's say green and if I save it the text color is green but we can like definitely change it
14:20
actually we don't need this green color now what I am I going to do is I'm going to give it a box
14:26
sizing this child will have a box sizing and the box sizing by default is content box we will
14:33
set it to by default it's content box all right fine okay the width is 100% we have the box
14:39
sizing set to content box let's give it a border now see once I give it a border let's say
14:45
10px solid and I already have a color written here let me just copy paste it quickly you can have any
14:52
color and save it as you can see since by default what is the box sizing here the box sizing here
14:59
is content box so what happens is the border as you can see is outside the border is outside the border is
15:08
after the specified width and height right it's after now if I say padding let's say
15:14
5px if I save it now as you can see it it looks very neat so the as you can see
15:21
basically after the width and height the border and padding are not included in it
15:26
but if we said if we said I'm sorry I had written this two times let it be one time
15:31
so basically now if I write instead of content box I will write border box you will
15:38
see how this border and padding will be adjusted in this width and height. You will see it here
15:44
So if I write here border box and if I save it, as you can see, the padding and the border
15:51
are adjusted in the width and height itself. This is why box sizing set to border box
15:58
becomes useful in many real world use cases, as we will see in the coming project videos
16:03
That will be enough for this video. In the next video, we will learn how to be
16:08
how to reset default CSS. We will also learn about CSS display property
16:13
So make sure to subscribe to the channel, hit that like button and I will see you in the next video
#Computers & Electronics
#Web Design & Development