Mastering the CSS Box Model

► Every element on a web page is rendered by the browser as a box. Whether it's paragraph text, a heading, a button, a div, a span, a link, or an image, every single element on a web page is a box that is made up of several properties. 

To be able to create cohesive layouts, it is important to understand the properties associated with these boxes so we can manipulate them. We can make the boxes bigger or smaller, and change the space inside or around them.

The parts of the Box Model are:

- The content box
- Padding
- Borders
- Margin

Padding is the internal space of an element that sits between the content and the border. 

Margin is the buffer or the space outside the border between the element and any other elements on the page. 

In this video, we'll look at all of these different parts and how they work. We will learn how margins of some elements collapse (sometimes), and also how we can know how the browser is calculating the size of elements.

► Timestamps:
0:00 Start
0:52 The content box + width & height
5:05 Borders
7:29 Padding
12:18 Margin
14:51 Margin collapsing
16:49 Box sizing
20:10 Summary

► Get the code:

► Links used in the video:

► Social Media:

► Code & Projects:

[LudmilaUcelniece]

Great teaching session. I am doing the course in the college and the teacher has not explained this part properly so it is a brilliant teaching resource for me. Thank you very much.

[davidbreitner]

I’m doing a CSS course right now and this was SO DAMN HELPFUL!! Thank you so much

[rianfirth]

This is the easiest explanation of these properties I've seen yet. Thanks for this.

[fintanpate]

This is the video to learn box model. Best one I have seen

[jamesdarnel]

Another Great Vid!! Cant wait for more!!

[thirty]

Great format ...wonderful and very understandable presentation.... thank you sir

[dominicomeke]

Highly recommendable, I see box-model in a whole different light now. This was really needed 👍🏽

[ericrosales]

This video is a classic. Anyone learning CSS needs to watch this.

[MrBhe]

So good to see you back Craig hope you're well! Can't thank you enough for your brilliant content, it's been so helpful and inspiring so thank you!

[jamesdarnel]

Everyone i know loves your vids man. Hope the extra views help!

[cliffordpaul]

This has been the best explanation I’ve seen yet. Thank you so much and good job!

[somnarchaudhary]

Thank you for your videos!! Today I got inline vs inline-block for the first time. Your videos mean a lot.

[yannickyannick]

You're doing amazing work with these videos. Can you make a video explaining flex box?

[mohammadhasan]

I really appreciate your video. It has helped me to understand the concept of the box model. I would like to request you to make a video on CSS flexbox and grid.
Thanks

[sophiawokoma]

so when would you actually want to use( box-sizing:content-box) since it seems to give you that weird effect ?? thank youu