‫Hey, there.
‫Welcome back in this lecture, let us discuss Ammo box sizing.
‫This topic is related to Biden margin, as well as the content that we are currently learning about.
‫So if I jump back here and if I jump on to our box, the word that currently we have is different than
‫we are visualizing.
‫OK, what I mean by this complicated, I suppose our current content rate is 300 pixel, but the total
‫element to it will be content less padding, less border.
‫Let's visualize this in terms of code.
‫For example, if I take with fixed rate born out of first box.
‫And I keep this weight as 200 pixels, save this one.
‫Get back here.
‫So this should be 200 bucks, right?
‫The element to it.
‫No element of it is calculated in default.
‫In default HDMI dom element, which is calculated, are the box where it is calculated by understanding
‫the content plus padding plus border.
‫At this point of time, we need to add this 200 pixel plus this 20 pixel general lieutenant, right?
‫And then this war Pixel two XL left and dawn right.
‫So this is going to be 224 pixel.
‫Similarly, the hide will be different at currently the quantum hiatus for physics.
‫So then we need to add this jaunty top and bottom and then this pole.
‫So this will change.
‫It will be at the.
‫You need to understand this point.
‫By default, the book sizing is equal to content box.
‫So there is a property by default with our B dog, with our HDMI dog.
‫And by default it is content box.
‫Let me write this here.
‫This will help you a lot.
‫So we call this ice box dad's sizing and there are two parts.
‫The first part is about container box and the second part is about more than a box.
‫In Box, which is the default setting, we're equals to content plus padding.
‫Plus border.
‫But with Voltabox, which will request to the content that we have provided, so that provided with.
‫And it really just among these three, so suppose currently our content, which was 200.
‫So let's take this as 200 and then this was 20 and then this was four.
‫But in this case, what will happen is this is going to remain same.
‫But the extra extra 24 will be decreased from this, so it will be 176 plus 20 plus.
‫Or let me give you an example.
‫And currently we have.
‫By default, this box sizing as content box.
‫But let me just try to change this one.
‫Let me try to use this box sizing and change this to board a box if I save this one.
‫And let me try to copy as it is with this one, so you can see the difference in both.
‫Save this one.
‫Get back here.
‫Hey, you can see these two sizes are different.
‫Let me close this one.
‫So this is with Border Box and this one is with content box.
‫Border box means everything will be inside this 200 pixel.
‫Whatever the weight we have provided, but content box means.
‫We can increase this extra padding space, we can increase this extra border space here, 200 plus 20
‫plus food.
‫But if I select the fast one, it is going to be 176 plus 20 plus four.
‫That's how it is going to work.
‫So all you have to remember is, in simple words, counting boxes, stretchable various border box is
‫fixed.
‫And this is important when you are working with the project.
‫We need to understand our layout.
‫It should be fixed.
‫You cannot stretch things outside of the box and you cannot take extra space.
‫If I'm expecting these values, I want you to adjust my content inside automatically.
‫I don't want to stretch and take extra space.
‫So that's why we're utilizing this border box.
‫OK.
‫That said, I hope you got the idea.
‫Now here, if I increase departing, OK, let's play this game.
‫You can actually select the value and change head itself.
‫So if I increase the padding now on my second one, you're going to keep on increasing.
‫And don't worry, our board is not changing.
‫Only the values on our browser is changing.
‫If I refreshed this one, it will get back the same.
‫You can do this with any website, not just with our website, but with any website.
‫Also, let me try to drag it on this side.
‫Click on the second box.
‫Increase dividing its sizes.
‫Increased my device.
‫Select the first one, click on my batting.
‫Try to increase.
‫You can see the rate the same only the high descending white.
‫Because we haven't provided any height.
‫I rate is going to be 200 pixels, so the padding is increasing now.
‫Fighting is increasing, maybe if I increase my border also, let me try to increase my border.
‫You see, the world is exactly the same.
‫And if I scroll down, move to the border box, my content is dying, you know, and the padding is
‫72.
‫And my border is 38.
‫I'm adding both of them.
‫So that's how it is going to work.
‫Whereas if I walk with my content box, it is going to increase my space.
‫So if I scroll here and if I increase padding, you can see the distance between both of them are increasing.
‫Same photos.
‫If I increase the border, it's increasing, which is a problem when we walk with all different types
‫of content.
‫Now, what is the solution?
‫Do we need to change all the bags, all the bags manually when we are walking?
‫No, what you can do is if you want, you can select the route.
‫And if you remember, we have a strict.
‫And by default, we can set border sizing as border walks.
‫This all sort of problem, and we can now remove this, save this one.
‫Get back here.
‫And if I try to select the first one, try to increase it spotting, you can see the weight is not increasing,
‫it's fixed, but we don't have any fixed height, so weight is not increasing.
‫Let's see what happens if we have a fake site.
‫Now here I have a fake site.
‫If I try to increase or decrease, the width and height is going to remain same unless and until there
‫is a break point break point like my padding is over 100 bricks and now suppose my height is limited
‫to 200.
‫But if I take batting, as 59 said, it's already taking 100 percent space.
‫If you hover over this batting point.
‫You see everything is green, which is 100 percent less batting now.
‫Now, if I try to increase my batting more than this, maybe I'd be contradictions.
‫Can see now things are troubling because my batting is greater than my height at this point of time,
‫we have a three point.
‫I hope you understand about the concept.
‫One more important thing, if I just jump on to this body part.
‫So we have this body.
‫You see, there is by default, space on the top as well as on the water.
‫If I close this one and I remove the margin for a while just to explain this one concept in back here
‫and I click.
‫Go to this body, you can see there is some beautiful space at the top with my body and when my feet
‫are also, there are some beautiful space.
‫If you want to remove all this space, you can set margin as zero.
‫Margin as zero.
‫So the by default margin will be zero for P-Dog, as well as formed by Marty Tagg.
‫So now there is no space.
‫I hope you got the idea.
‫Now this will apply to everything, so be careful.
‫We will discuss about this later, and I don't recommend this adding here every time, depending on
‫your project requirement.
‫But what you can do is you can either select individually and then donate to zero.
‫Or if you understand this whole concept perfectly, then you can do it here and then we can change according
‫to our requirement, wherever we want.
‫It's our custom Gordon.
‫We can do whatever we want.
‫The basic thing 2.1.
‫I hope you got the idea about bulk sizing.
‫Thank you for calling.
‫Let us understand about the margin as well as batting values in the next lecture.