Margin and Padding Deep Dive: The basics

Показать описание

Margins and padding cause a lot of confusion amongst new developers. This video is the start of a deep dive miniseries taking a look at them.

This video is really a look at the very basics of margins and padding, what each one do, and what the differences are between the two of them.

I also take a look at how auto margins work, and why & how we can use them to center something vertically on the screen. In this section though, I did forget to mention that for these to work, the element also needs to have an assigned width as well (thanks to Jon for pointing that out in the comments)!

Part 1: The Very Basics (this video)

---

---

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.

Рекомендации по теме

Комментарии

What I've learned so far from this vid:

So padding is creating space inside of a content, while margin is creating space outside of a content. You can also adjust specific spaces for both padding and margin, such as -left, -right, -top, -bottom, or you can all do it in one property. Lastly, using auto will take the biggest space as much as possible. You can also use auto to center objects. However, auto will be calculated as 0 when using it for -top and -bottom.

Good video, thank you!

Anon-tebz

Your explanation is so clear and concise. I feel like 90% of programming tuts videos here are some Indian guy or some computer science nerd who have no social skills, trying to explain things but end up just rambling. Thank you for this. VERY MUCH

closetgrasshopper

Your explanation was very clear. Though I've finished my course, I can say confidently that today, after watching this video, I've learned margin and padding and now, no more nervous about these two confusing things. Thanks, Kevin for your nice video.

mdchowdhury

Ah, finally someone that gives it loud and clear with no confusing metaphors.

Hannibalism

You are a Godsend to those learning how to code! I finally understand how margin and padding works in a deeper way. Thank you!! Subbed!

pelosuelto

Excellent tutorial, there are so many tutos here but this one goes deeper and I finally got it after many years of confusion

yadusolparterre

Now I understood completely!
Thanks for the detailed video on the topic.

abdulrehman

Thanks for your work, Kevin. Very clear explanation. Looking forward to the third video! very interested in your thoughts about real life cases!

NeroIvanY

Thumbs up for every series. Helping many of us especially those who just beginner

tbgan

Thank you so much for taking the time to explain these concepts, you can tell that you put a lot of good intention and consideration on this video, it's a total like for me.

sebastiandelima

Great series on margins and padding. One thing that may help new learners with the margin auto centering method is making sure they know the containing div's width. I can't count how many times I tried to use the margin auto method and wanted to shake my computer, because I nested or the parent width was not 100% of the screen size.

I also enjoyed seeing the BEM naming convention in the third video. It seems to be the current favorite of the industry and it is something I myself am currently trying to get into the habit of using. :)

drummerdev