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.

Box Model example

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!




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Git As a New Way to Write and Publish

How to display database content in your flask website

Using Distributed Computing at Scale

Confluence is DevOps for Valuable Information

Whatever you say, happens

Let’s Ditch “Master / Slave” Language from Tech, and Replace it with “Boss / Sub.” Sync Sux.

How I rented a nice place to live using Elixir and a Facebook Messenger chat bot

GIFs For All Your Chat Messages! Power-Up Your Appwrite Applications Using Python and NLP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Lago

David Lago

More from Medium

How TO Center A Div In CSS

CSS spec: Cascade Layers — quick introduction and usages

CSS Fundamentals

Cloning of Expedia Website