Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing | Video

Collapsing margins are easily one of the most confusing behaviours for people who are just getting into CSS, mainly because it's really not very intuitive at all.

In this video, I look at what collapsing margins are, and how you can deal with them.

After that, I also look at using a global reset of margin and padding so that we don't have to deal with the defaults, which can really help out beginners.

And lastly, we look at the box-sizing property, and it can be used to change the way padding (and border) are calculated, all which make our life a lot easier.

This video is all about trying to really understand the more nuanced parts of CSS margins and padding, so that you don't run into strange behaviours and being able to change a few settings to make your life a lot easier.

CodePen links:

https://codepen.io/kevinpowell/pen/e6b6e46551e162955a924d358d588bcb

https://codepen.io/kevinpowell/pen/b698ca170777f24803875c6a63917eeb

Part 1: The Very Basics - https://youtu.be/EhbZGV2dqZ4

Part 2: Collapsing margins and box-sizing (this video)

Part 3: Using Whitespace effectively - https://youtu.be/TkdBtmwWyZo

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

Support me on Patreon: https://www.patreon.com/kevinpowell

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/

Twitter: https://twitter.com/KevinJPowell

Codepen: https://codepen.io/kevinpowell/

Github: https://github.com/kevin-powell

Video: Margin and Padding Deep Dive: Collapsing margins, resets, and CSS box-sizing

About