Make Sense of Box-Sizing in CSS (and avoid this major mistake!)

Get updates about new videos in your inbox → tinyurl.com/yuu8x8my
In this video, we're going to take a close look at the 'box-sizing' property in CSS. We'll cover how it functions, the options you have, and a major mistake you'll want to avoid. Make sure you watch all the way to the end.
The 'box-sizing' property controls the box model, or in simpler language - how the dimensions of an element are calculated, taking into account its width, padding, and border. There are two possible values you can assign to it 'content-box' and 'border-box'.
The default value is 'content-box'. This was the standard approach until around 2009-2010 when browsers began supporting 'border-box', a new addition to the CSS3 recommendation.
So, what are these values, what are the differences and why is it important? Watch to Find out
Demo #1: codepen.io/dmtrmrv/pen/YzMBOoN
Demo #2: codepen.io/dmtrmrv/pen/QWPYxZe
Chapters:
00:00 - Introduction
00:13 - Box-Sizing: Two Values
00:46 - Example #1: How Content-Box Works
03:24 - It’s Very Counterintuitive: Enter Border-Box
04:01 - Same Example with Border-Box
05:21 - Example #2: A More Realistic Demonstration
06:51 - Using calc() to Work with Content-Box
07:49 - It's Frustrating, But Let’s Continue
09:38 - Content-Box, I Give Up!
10:51 - What to Do Instead
11:43 - Major Mistake to Avoid

[@Nusamaxa]

that "OMG" reaction to the text-input's width was absolutely epic! 😎✌

[@dmtrmrv]

Well, that was genuinely how I felt when I first started learning CSS, lol!

[@Nusamaxa]

@@dmtrmrv so true, i still get surprised with how some styles work, even after im 100% sure its correct 😅 then, i find my own idiotic mistake 😁

[@youferret]

Great lesson Dmitry. I wonder how many coders were wishing they had seen this earlier.

[@dmtrmrv]

Yeah, true. I definitely made this for my younger, junior self.

[@pappapez]

Thanks! This is insanely important stuff. And you explain it so well. You almost make css make sense!

[@dmtrmrv]

Thank you : ) I swear it does! Well, most of the times.

[@MissEAG]

Hi, I have been really enjoying your teaching style and look forward to your new videos. I have recently been learning about partials folders in Sass and learned about creating variables in a colors folder for example. I realize that isn't what you've done here as you've listed colours at the top under the :root tag?... not sure.. maybe in a future video could you talk about when to use this list of colours that you have listed in double hyphens vs using partials folders and using $black = #000000, with the dollar symbol, for example. Maybe I'm missing something fundamental, not sure, I will also look it up. Thanks!

[@dmtrmrv]

Hi @MissEAG! Thanks for your kind words and for watching the videos!
You're right; I don't use separate files to store variables in my demos and stick to vanilla CSS rather than Sass. My main goal is to focus on a specific topic or pattern that can be applied across various contexts-CSS, Sass, CSS-in-JS, and so on-rather than on the tooling itself.
In real-life projects, it often depends on the project, but I would likely put variables into a separate file, which is generally considered a best practice.
Regarding Sass, I stopped using it a few years ago as CSS began to rapidly evolve. We now have features like variables, nesting, and other enhancements, so I personally don't see the need for Sass since it adds another tool and dependency. I prefer to keep my projects as dependency-free as possible (but with as many as necessary).
However, I understand some engineers still use Sass, and if it works well for the project and the team, that's perfectly fine.
Perhaps a CSS vs. Sass video is something to consider for the future.

[@Tesfamichael.G]

Nice lesson!

[@dmtrmrv]

Glad you enjoyed it!

[@onelook1870]

How to make font-family inherit for form elements if it is set in body?

[@dmtrmrv]

Hey @onelook1870, thanks for your comment! I'm not sure I fully understand the question. The video doesn't cover that, but I'll happily look at your code if you happen to have it on CodePen or Github.

[@onelook1870]

Form input field doesn't inherit font family set to body. We have to set again.
body { font-family: "Poppins", sans-serif; }
We have to set it again for form fields.

[@cuemaster-]

@@onelook1870 That seems to be right, but let's wait for Dmitry confirmation. Thanks for the input (no pun intended). 🙂

[@douvogiannisgeorge]

as always explain for humans ;)
cant wait for more!

[@dmtrmrv]

Thank you! Glad to hear the explanation was easy to understand!