Learn CSS BOX MODEL - With Real World Examples

On the web, everything is a box, literally everything. All the elements, the images, the videos, the paragraphs, the headings, entire sections, everything! And with everything being a box, everything has this box-model applied to it. We see, the box model consists of the content, the padding, the border, and the margin.

[niinjablade]

This is the holy book of CSS Box models, thank you.

[pepitoalmonte]

Jesus bro, everyone is focusing on making short videos without details, but this 17 min long is worth every second.

thanks so much.

[official_bqpro]

The Odin Project Brought me here. it was very clear and punctual on point.. Much love form 'South Africa'

[XMusicSickness]

Hot damn, this guy literally made me understand a concept i was having trouble with for a month in just 17 minutes...

[celeb_intel]

This video is a gem! The explanations of the CSS Box Model are super clear, and the real-world examples make it so much easier to understand. It's great to see a tutorial that breaks down complex concepts in such a simple way. Thank you for taking the time to explain margin, padding, border, and content in detail—this will definitely help me with my web development projects.

[dragon_buster_k]

Dude, you don't realize how much trouble I've had with resizing buttons, inputs, and other stuff and their true sizes being inconsistent. Thank you so much man!

[ride-time]

That is by far the best explanation of the box model I've ever seen. Nice work!

[JimmyCrackorn]

Following your content has made my code the cleanest it's ever been since trying my hand at CSS. I started web development with HTML 23 years ago, and it was far different from how things are now. You give the most complete rundowns, and show a bunch of variations. I learned new things from you I couldn't find on my own because I didn't even know how to describe what I was looking for. Thanks to you, I know how these languages relate to each other.

[andreuppmanofficial]

Excellent video! Now if only you were my university teacher... This 17 min-video explained the concept of box models way better than literally hours of course material I tried to digest before turning to YouTube for a better understanding.

[alioe]

also came here from the Odin Project. You told the box model like explain it like i'm 5 years old. Thank you! You've explained it very clearly!

[jonaichi_]

This is the simplest and best guide of the Box Model I've seen yet.
Great job brother!

[AndyMorrisArt]

I appreciate how well you explain the details. I learned more in the last 17 minutes than I have in hours of watching other videos. I knew to use those resets but no-one ever explain exactly how they worked. Thanks.

[kopilkaiser]

Definitely, you are the best source to learn CSS simple and easy. You have made it absolutely simple to understand the logic of all these technologies

[internet_user_]

No other video on this topic clicked with me until now. The way he explains it is just perfect and completely understandable. Other people make it sound like this concept came from another planet.

[DeanCohenOfficial]

Best video I have seen about this topic.

[Dante_Le]

This is the most concise and intuitive explanation of the box model I've seen so far

[kentuckybaseball]

Wow, this is perfect - The visuals of each box is a small detail but really helped me finally understand the difference between all of these properties! Thank you!

[badcatdesign]

I use the mnemonic of “TRouBLe” to remember the order of Top Right Bottom Left. Keeps me out of TRBL 😂 Thanks for the video.

[thegreater-]

this video is just top notch, you have a natural talent for explaining things in a way people can understand easily

[shoebpatel]

You are the best CSS tutor available on the youtube. Thanks!