Hello everyone and welcome back.
In today's video you will learn about the box model in CSX all HDMI elements can be considered as boxes.
The CSX this box model can be thought of as a box that drops on each external and it consists of margins.
Borders putting on the content of the human element itself as you can see in the center.
It's got this content of the human element and outside that content we have padding and outside the
padding.
We have border and outside the border.
We have margin.
Let's try an example to understand this box better.
Let's out a paragraph let's give it some takes say Loren Ibsen dollar let's call business couple of
times.
Let's say the let's bring a bar life so as you can see we've got this paragraph on the screen.
And now when we inspected.
So as you can see we've got this blue color.
So this blue glow represents the content of our estimate element.
And also if you can see we've got this orange color as well.
So despite each color it represents the margin.
So by deflate paragraph has a margin of 16 pixels for top and bottom.
So that's why we see it just on top and bottom see if you change it to say 16 pixels all around.
And now when we go over we've got this orange color on all the sides.
We don't see any padding here because the paragraph element does not have a of by default.
So let's add some say putting it in pixels and now as you can see you've got this green color outside
OK blue color.
So this green dollar represents the padding.
Let us out the border as well say border five pixels solid on a blue let's go over here and now as you
can see you've got this light blue color content and I would say that we've got this green color padding
and outside that we've got our border an outside doctor we have the margin and that's how the box model
looks for a real estimate.
And then also let's I alluded to an estimate element see for the pixels.
Also let's give it a height say 200 pixels.
And as you can see when we give women height to an element it represents the weather height of the content
on the.
And now as you can see on the bottom left side of the box we've got the dimensions.
So it is 446 pixels by 246 pixels.
But we give the height just us two hundred pixels.
So these extra pixels extra 46 pixels it just when we are batting and border to an element it adds to
the total width and height of the element.
So if you see here we've given about image of 18 pixels.
So body water making pixel padding top eight in pixel which is 36 pixels.
Similarly we have water bottom and border top which is five pixels each.
So then pixels back.
So 36 plus 10 which is 46 and we give the height as 200 pixels so 200 plus 46 which is 246 pixels.
And that's how our element ended up with the height of 246 pixels and that's also today guys.
If there's something that you did not understand feel free to drop a comment and we will discuss it.
See you in the next video by antique get.