Hello everyone and welcome back.
In today's video we will learn about the Blocks sizing property of CSX in the previous video we learned
about the concept of box model how all achievable elements can be considered as boxes and many are pouting
and bother doing it at the minute it adds to its total width and height.
Now let's say we have these two elements.
As you can see both of these they look alike.
Just out the background color is different.
Now let's add a padding to one color.
So let's bring this up here let's say I got into this second car seat but total of two pixels that save
it I'm now as you can see this second guy that looks bigger.
And this is happening because we added this fighting box model the concept that lets say we don't want
this to happen.
So for that we have another property called Box sizing it accepts two values bottom box and content
box.
The default values control box.
So currently what you're seeing is the content box.
So let's stretching into a little box sizing so box sizing by default it is content box that's make
it by the box let's save it.
And now as you can see the boxes did not increase.
So the bottom box values includes the padding and border in an element to do within height.
Now this has a side effect let's check that out see instead of these text we had image you let's add
a glossy image.
Let's give it the image you also got an image here.
Let's just wasted let's go to an alternate text.
So a random image let's copy this image dog and paste it for the second one as well.
Let's say that let's bring about good editor.
Let's add some states for this image so we may see with hundred percent.
So what we're telling you viewers.
Take the 100 percent of the word available inside the building at the minute.
All right.
So as you can see the first one is taking the entitlement because there's no padding or border in that
division.
But in the second one we have given this body so it has this empty space on all the sides.
Let's try increasing the balance in self titled do we make it 48 pixels.
And now as you can see our image reduced similarly let's try making it to the pixels.
Again the size of our image reduced.
And this is happening because the to do with this speaks to 300 pixels on view using Box sizing to border
box.
So it includes the body.
Also in the wind.
So when we increase the body and with this constant which is 300 pixels so it it results in reducing
the width of the image.
So that is the side effect of using what it.
Say for example the outer body here as well say body in 32 pixels let's say the.
And as you can see the box size increased but the image remains the same.
Similarly that's why I am using it more say 60 pixels.
And as you can see the box size is increasing.
But the images stay in the same dimension which is 300 pixels by 300 pixels.
So both these values have the pros and cons there will be times when you will have to use body box and
there will be time then you will have to use content box that's all it for today guys.
If there is something that you did not understand feel free to comment on we will discuss it.
See you in the next video by anti-gay.