Learning the Box Model (CSS)
CSS is something I continue to struggle with on a daily basis. But I’m not the only one who struggles with something like this, I see through discord many people have an issue with it. It’s very useful as we all know to style our applications and make something so dull look immaculate. We all like a shiny new toy instead of a plain old one that we have had for years and years. CSS is something similar to that shiny new toy, you can create beautiful UI also known as User Interface. It’s natural for us to be attractive to pretty things such as this big colorful CSS picture above, it creates interest. What I want to do today is to show the basic understanding of the box model of CSS so you can create yourself a nice beginner experience with CSS.
So why learn basic CSS? Well, it creates this sense of freedom or free flow I’d like to call it when designing UI, isn’t there other options? Well, yeah. Theres bootstrap but you're usually limited to the type of designs you can use, same goes with tailwind, you're incredible limited in what can be done to your application. CSS is the ultimate freedom even though its a bit complicated. That being said let’s take a minute and look into the box model which will help further your CSS understanding like it did for me.
CSS Box Model is used when someone’s talking about the design or layout. Think about HTML tags being boxes, every single one. Such as <nav>, <header>, <body>, <p>, etc. Picture each one of these as a box, whats inside that box is the content that was written within it such as strings or forms. This box can have a width or height within the content thats inside, theres also padding to compress the content along with a border for the outside of it. We then have the margin which is the complete outer layer.
Going a tad deeper, the content of the box is where the text and images appear which is the blue box. The padding clears an area around the content and is transparent. The border goes around the padding and content as shown in the yellow-orange color way. Then finally the margin clears an area outside the border and is also transparent. Once you learn the most basic thing about CSS which is the box model, the easier everything becomes when you dive deeper into CSS.
A short bite size blog for how the box model helps within CSS. I think this is very important to understand because it has been helping me a lot more than what i’m experienced with when it comes to CSS. Hope you enjoyed the little lesson about the box model and keep coding on!