Mastering the CSS Box Model

[@craigabourne]

Learn CSS: kzbin.info/aero/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR

[@rianfirth]

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

[@craigabourne]

Thanks! Appreciate the kind words

[@MrB66he]

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!

[@craigabourne]

Thank you! I'm great, hope you are well too. Glad to hear you're finding the content useful. Plenty more on the way and a website with articles, projects and challenges is slowly coming together too 👍

[@dominicomeke1586]

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

[@craigabourne]

Great to hear! Thanks for the kind words Dominic

[@fintanpate5977]

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

[@craigabourne]

Wow, thanks! Appreciate it 👍

[@ericrosales8847]

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

[@craigabourne]

Thank you! Appreciate it 🔥

[@jamesdarnel]

Another Great Vid!! Cant wait for more!!

[@craigabourne]

More to come!

[@somnarchaudhary]

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

[@craigabourne]

That's good to hear! Thanks!

[@jamesdarnel]

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

[@craigabourne]

Thanks James! Appreciate it. New vid dropping tomorrow

[@jamesdarnel]

@@craigabourne word

[@mohammadhasan8457]

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

[@craigabourne]

Absolutely! Flex and Grid videos on their way in the very near future

[@yannickyannick3317]

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

[@craigabourne]

Absolutely. It's the next video I'm doing. Coming soon. Next few weeks hopefully!

[@yannickyannick3317]

@@craigabourne Can't wait!

[@mixall.coding4]

Nice

[@craigabourne]

Thanks

[@davidbreitner]

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

[@craigabourne]

You're welcome!

[@sophiawokoma3711]

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

[@sophiawokoma3711]

and also if i wanted the content box to still have the original 302 px width and 200 px height but as the box-sixing:border-radius property now changes the content's sizing how would I go about rectifying that ? would i have to make the content box to be bigger than 302 px width , 200 px height before adding the box sizing property so that it counteracts this effect . but then how would i calculate the size I would need it to be for it to have those exact measurements?? is that possible /makes any sense ?Sorry for bombarding you lool

[@craigabourne]

box-sizing: content box; is kind of the original default setting for CSS. They have to include it as an option for older, legacy sites that are using it. I can't think of a reason to use it in the present, with modern sites as it can lead to inaccuracies.

[@craigabourne]

That's ok! Bombard away! Width and height values apply to the element's content only with box-sizing: content-box. So the border is added to the outside of the box. So you need to take the border into account as it will add height and width. If using border-box, and you want to element's content to keep the size, yes you would have to add the border width to the height and width. But it would just be better to use content-box in this case as this is essentially what you would be replicating. Sorry for the late replies btw. I've had Covid unfortunately so have been out of action.

[@thirty3843]

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

[@craigabourne]

Thank you! Appreciate the kind words 😊

[@dobrilofotis]

Great video. Underrated channel

[@craigabourne]

Thank you! Appreciate the kind words.

[@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.

[@cliffordpaul6086]

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

[@craigabourne]

Thanks! You're very welcome!