Name: Learn CSS Box Model In 8 Minutes
Uploaded: 2020-03-28T16:50:20.000Z
Duration: 8 min 22 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Present continuous

in today's video, I'm going to be covering every part of the box model so you could easily understand how to position elements using with padding, Border and Margin and CSS.

To-infinitive

I just have two boxes off to the side here with the text one and two and background colors of red and blue.

These boxes are represented in the CSS as box one and box, too.

I've also removed all padding and margin from the page, so their boxes air pushed right to the corners of the page.

And to get started explaining the box model in CIA says, is to understand that everything in CSS is a box of either a rectangular shape or a square shape.

And it doesn't matter what you have in CSS, it's a box, whether it's text aah Button a div.

CSS is a box and these boxes have different parts.

You have the actual content of the box, which in our case, is this text one and this text to you have the padding of the box and then you have the border and the margin we're going to go through all of these different sections and how they interact to form the box model.

So the easiest thing to understand is the actual content of the box.

If you do nothing to a box, it all the content of the box is just going to fill up the space inside of the box, and the box will be no larger than the content.

But if you start adding different things to the box, then you can start to expand the size of your box.

So, for example, one of the easiest ways to make your box bigger is to use Patty.

And if we say that you see that our box has increased by 20 pixels on all sides, everything is pushed away from this one text by 20 pixels, and that is because patting occurs inside of the background of the element.

It occurs inside the border essentially, and it goes around the content of the moment, so the content is the very most inside thing in the box model.

Then we have Patty next, which will include the background color of an element.

So most of buttons in CSS, our style using patting 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, toe also be 20 pixels.

We can see if we get this nice purple border that goes around the pattern of our element.

So we have our 20 pixels of padding around our content, and then we have 20 picks of the border around the patio, which is around our content, and the very last thing that we could have on our element is marginal.

So if we just add 20 pixels of margin to element, you can see that is spacing on the outside of our border.

And margin is what we usually use to space two elements apart from each other.

Patty is mostly used toe add background to an element to make it go around the content, and margin is specifically to go around two different items to make them spaced apart from each other.

These values so that we can see the difference between them.

So we'll just make them all completely different if we say that you see that we now get this element here.

And if we right click on this and go down to inspect, we can see the different styles.

So if I click on this computer tab, we can see using chrome deaf tools all the different sections of the box.

Mao, this rectangle right here is the box model on the inside this blue section.

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 her box.

We can specify distinct sizes of our content using the height and would property.

So if we said a height here of 100 pixels and we said a with of 100 pixels, you can see that we now have 100 by 100 square.

And this blue section is that 100 by 100.

Next we have patting, which is this greenish color that you can see and you can see It's 10 pixels that goes directly around the word one you can see it just barely touches it.

So this is just around the content, and it also goes outside of that height and width that we've defined next is that Purple Border, which we can see by hovering over here.

And then, lastly, this margin, which goes around the element itself on the outside of the border, and it's used to break apart two elements from each other.

Well, actually, just copy all of this code down to box number two paste to hear will remove the margin for now and we'll say that and we see that our box number two is showing up right here.

Now, if we add a margin of 60 pixels to the icebox, you would think that the box would end up moving down because it needs to move 60 pixels further away from box one.

But if we say that, you see that it doesn't actually move further away, and at this 60 pixel margin is the same.

Between these two elements, there's only 60 pixels here and not 120 like you'd expect.

And that's because in the box, model margin actually collapses between two elements better next to each other.

So since the elements are right next to each other and they both share a margin, which ever margin is the largest is the one that will be used.

So if we change this to 70 for example, they had now have 70 pixels of margin between them.

And even if we decrease this down to zero, you can see that it still has that 70 pictures of margin between them.

But if we make this 100 it now has 100 between these two parliaments.

And you can see that by just hovering over here we see that 100 margin and if we select box to, it has that 70 margin, but only 30 more between here and here, because this is a 100 margin between the elements.

Another thing did know is that if we hover over box one here, you can see down in the bottom left.

It says that the high end with is 1 80 by 1 80 But we actually find our heightened with to be 100 by 100.

And that's because by default in the box model, to get the height of an elephant as the other the height.

Plus it adds together the patty on the top and bottom.

So in our case, 10 on the top 10 of the bottom would be 20.

So are 1 20 does the same thing with the border on the top of the bottom, so we have 30 top bottom, which would make it 60.

And that's how they get 180 as the height margin doesn't account into the height of an actual element for sizing using CSS by default.

But if we wanted to change this so that our heightened with right here are the actual heightened with of our element, what we would need to use is we need to change the box sizing over element to be border box.

And what border box does is it makes this heightened with account for it, the padding and the margin, or the padding in the border of our element.

His border down to 20 pixels, So it's a little bit smaller.

And if you say that, you see that if we go to our box number one are content section is only 40 by 40 in the other example.

Without this border box there, you can see it's the heightened with 100 by 100.

But when we use border box, the actual size of the content gets subtracted out from with the border and the padding, so that when we have reversed, you see, our actual element is 100 by 100.

Instead of adding all of these, it just uses this height and this with and the border and Patty just cut into that height and whip.

As you can see, our Patty is still there on our border is still there.

But the actual content of her element was struck down to be 40 by 40 so that the overall element everything inside the border is a total of 100 pixels instead of being 180 when it comes to learning the box model, the easiest way to do it is to use these chrome depth tools, and you can see each of the different sections of your element from the content patting border and margin and even has a nice little diagram, so you could easily tell what is what and what you're actually defining.

But some good notes to take away is that if you want to space two elements away from each other, use margin.

That is definitely the best way to do it using CSS.

And if you want to space out an element from itself, you need to use patting because Patty is inside the border, which will include the background color and margin is outside the border.

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 that is almost always used in CSS because it makes styling things so much easier.

This would get added to the universal selector so that every element we used border box because it's so much easier when whatever you write as the heightened with is the actual heighten with the element.

And you don't have to worry about doing math in your head when you make these values.

If you did, please make sure it's just described in the channel for more content just like this and check on my other CSS related videos, which are going to be linked over here.

 Thank you guys very much for watching and have a good day. 