Good tutorials, Kevin. Please, don't ever quit UA-cam, you're my inspiration. I'm 16 years old and i want to learn coding and all that stuff to help my family with some income, at the moment i can't afford a paid online class, you're my hope. I will always support you! :)
when starting any project, i always do margin:0; padding:0; box-sizing: border-box; never really thought about these problems. i just used them because everyone does it as best practice. but now i know. Thanks a lot!
These tutorials are the best! What you are explaining is genuinely useful and solving the sort of problems we are actually facing. Your delivery is very friendly, well-paced and the explanations are easy to follow. I really look forward to the updates to your channel. Thank you so much!
Loving this series. So so helpful. I've been getting hung up on margin and padding: what they do differently, when to use, etc. Thanks for the tutorials, very straight forward!
You sir, you have one of the best front end UA-cam channels out, I'm gonna religiously watch all your videos. Thank you for the uploads. I'm learning so much! Keep the great work going, don't stop.
Great video tutorial, Kevin. One would think that it would take only 10 minutes to teach Margin and Padding. I really dig these Deep Dive videos. Thank you very much!
Good job brother! You are friendly, direct, understandable and I really love your content! Your explanations are better than paid curses in my country. Keep on doing a great job!
This has helped me understand the margin-collapse problem. This is one of the best explanation I have found. Keep doing the great work. This was really helpful.👌✌
Great stuff. My preference is still to add margin top or left first over the other directions. The reasoning being that margin on something should appear to be moving the element it’s on and not the next element.
These tutorials are great because there's stuff I use to hack around (like using calc(size - padding) to have the actual size of an element) but there's some super obvious solution using an attribute I didn't know about!!!
Our teacher taught us about resets (border, padding, margin to 0) but he had us typing out every single element (audio, body, h1, h2, img, p, video, etc) and we would just add to that each time we added something new on our html pages. Didn't teach us about the wild card, makes it much simpler for sure.
I never knew about box-sizing: border-box. Good to know that the default is box-sizing: content-box and when you don't want padding to affect the size, use border-box
Haha, I've been there wasting hours of my time debugging the strangest and simplest things in the past. Hopefully I can help people not have to do the same :)
Awesome tutorials! I've found that when I set widths as percentages on children elements of parent elements whose box-sizing is set to border-box, the result was surprising at first. The width percentage on the child element will be a percentage of the parent's content width, not total width. So in your example at the end, if the total width of the parent is 200px, but the content-width is 120px (200px total width minus 30px padding-left minus 25px border-left minus 25px border-right = 120px content-box width), and then I set a percentage width on a child of that box, say 80%; that 80% is calculated based on the 120px, NOT the 200px total width. Has this ever taken you by surprise?
Hm I’ve never noticed this. I’m mostly using flex or grid though and still haven’t figured out how borderbox works on flex items, I keep getting conflicting answers when I look into it or ask.
Thanks for the explanation, I'm a Russian beginner and all my friends who are experienced in programming told me to use tutorials in English, because they are better than Russian ones. So it might be true, because some topics are covered and explained much better. p.s BTW your voice and pace of speaking are good and a bit remind me of Roman Mars, maybe you've heard of this man.
Thank you for the high quality content, I just wish I would enjoy CSS more I love doing the backend stuff also JavaScript but I don't have the creativity the get some own designs, that's really another way of thinking than doing problem solving
Hi Kevin, thanks so much for the tutorial, am learning alot brushing through these basics after some years. One quick question. Do images have default margins? And also do they experience collapsing margins especially when you do resets on images like you usually do by setting images to display:block
Great tutorial! 7:14, I'm still confused as to how does the top padding of the demo-box creates a separation between the demo-box and the one box. Why isn't it a padding-bottom of the demo-box instead?
You post awesome tutorials... From your tutorials only .. I learn a lot... Can you please post a video on inline block and how vertical align works with inline block... And what is actually inline block... Ever one say that inline block that an inline element which takes padding margin width and height.. But i think its more than that..please do post a video...
To Summarise:- 1) When Margins of two elements touch each other they collapse and merge into each other (even between Parent and Child Element) and then Margin of only one Element works. 2) This Collapsing Property is not present with Padding and will never merge. 3) To get rid of this Problem, use little padding as a separator between two elements as Padding doesn't collapse. 4) To make your life easy, use Presets ( margin: 0; padding: 0; box-sizing: border-box; ) 5) There is no such thing as margin-box or padding-box cuz no browser supports that. Bonus Point:- Use Inspector Tool to check where your Margins and Paddings are actually going.
Great explanation thanks very much!! I would like to know how to center (display: blocks, inlines, inline-blocks) vertically and horizontally in automatic way? pls make this video!
Amazing work with these tutorials, although I've been following Angela Yu's paid udemy course, which is a great course, there are aspects in which you go into far more detail than she, so this is really a great help, thank you!
Awesome stuff. There are countless vids about what collapsing margins are, but You, as always show, what does it MEAN for us. I spent last few days digging this topic, but drop-shadow example at 4:30 was a WOW-thing for me. Another priceless-knowledge-vid. BTW: I like to fork interesting codepens to make my own note-comments. I can't fork these codepens, are they protected in some way? Once again: thank you, thank you aaand thank you!
So glad to hear that you got something from the video! Sorry about the forking thing, I make the videos ahead of time and mark them as private, I'll have to go through and update them to public.
Hello Kevin, Thanks so much for the tutorials. It really help me a lot. Would you be able to discuss about CLEARFIX and whats its scope or when to apply it? :)
You'd want to use the clearfix in layouts where you're using floats, which shouldn't be very often these days. It's used to help controls layouts with floated items, as when we float multiple items, the element they are inside collapses. Clearfix stops that, more or less.
Good tutorials, Kevin. Please, don't ever quit UA-cam, you're my inspiration. I'm 16 years old and i want to learn coding and all that stuff to help my family with some income, at the moment i can't afford a paid online class, you're my hope. I will always support you! :)
That's so awesome! I wish I was as inspired as you at 16. Keep on working hard and it'll pay off!
Hey how is it going? Did you manage to make money out of it and help your family?
@@deltatropie3571 I guess it's too early to have a huge progress which will give a lot of money. He's only 17 currently.
u
@Christian Thone probably 20 now. He might have grown super good at coding or might have left it forever.
when starting any project, i always do
margin:0;
padding:0;
box-sizing: border-box;
never really thought about these problems.
i just used them because everyone does it as best practice.
but now i know.
Thanks a lot!
These tutorials are the best! What you are explaining is genuinely useful and solving the sort of problems we are actually facing. Your delivery is very friendly, well-paced and the explanations are easy to follow. I really look forward to the updates to your channel. Thank you so much!
Your welcome Ben, thanks for the feedback!
So true!! Very helpful and easy to follow
Wow, in all of the programming I have done, I never really knew that's what collapsing margins meant! Thank you, Kevin! Your tutorials are great!
Another great video. I now understand a whole lot more than I did 28 minutes ago!
4:45. Kevin, you coined the international web developer’s motto: “We live to get around it.”
Loving this series. So so helpful. I've been getting hung up on margin and padding: what they do differently, when to use, etc. Thanks for the tutorials, very straight forward!
You sir, you have one of the best front end UA-cam channels out, I'm gonna religiously watch all your videos. Thank you for the uploads. I'm learning so much! Keep the great work going, don't stop.
Thanks for the kind words, and I'm glad that you're enjoying my content :D
Great video tutorial, Kevin. One would think that it would take only 10 minutes to teach Margin and Padding. I really dig these Deep Dive videos. Thank you very much!
That was all so well explained, thank you Kevin. I always wondered why it was called "border-box", now I know. Excellent - cheers
Good job brother! You are friendly, direct, understandable and I really love your content! Your explanations are better than paid curses in my country. Keep on doing a great job!
So many questions I didn't even know how to ask correctly have been finally answered!
These videos are so helpful, thank you! They really help to clear some confusion that I previously had.
So happy to hear that Banalitude!
you are a life saver. I was literally scratching my head off due to this annoying collapsing border thing. thanks a lot man. 💖
This has helped me understand the margin-collapse problem. This is one of the best explanation I have found. Keep doing the great work. This was really helpful.👌✌
Glad it helped!
You've done an excellent job of explaining the collapsing phenomena
You is the man! I took a breath of relief after watching this!
oh man you save my whole night from being wasted on these problems in 22 minutes. Thank you for your great presentation sir
That was really helpful. You are indeed a great tutor.
Really appreciate your quality work.
Thanks man, never took the time to dig into CSS so its always seemed so obtuse to me. Videos like this one clear up so much for me.
Margin and padding are not bad things anymore, go ahead Mr. king of CSS.
Great stuff. My preference is still to add margin top or left first over the other directions. The reasoning being that margin on something should appear to be moving the element it’s on and not the next element.
These tutorials are great because there's stuff I use to hack around (like using calc(size - padding) to have the actual size of an element) but there's some super obvious solution using an attribute I didn't know about!!!
4:35 Found myself flabberghasted by this exact behavior before I found your video. Thank you for saving my sanity Kevin.
Wow ty a lot I don't know how much time I had to deal with this collapsing margin, you just saved a lot of my time just with 40 mins of video.
that was a amazing video kevin this cleared the concept of margin collapsing, i was facing hell lot of issues because of that
Kevin Powell the father of CSS.. really you helped me out with that margin collapse. Thank you buddy
thanks so much for solving no one youtuber tell this
4:20 thanks for showing this.I recently ran into this problem
Our teacher taught us about resets (border, padding, margin to 0) but he had us typing out every single element (audio, body, h1, h2, img, p, video, etc) and we would just add to that each time we added something new on our html pages. Didn't teach us about the wild card, makes it much simpler for sure.
You're the man, Kevin! Thank you.
I was going through your videos and found this. Great tutorial, I'm a little stronger on the server side so this helps. Thanks!
You are such a great lecturer in my life.
Very good video. This is much more understandable than a similar one you made specifically on border-box.
Thank for yout tutorials Kev! They helps me a lot!
Thanks Kevin! Your videos are always very helpful. This explains a lot!
Kevin, you are the best.
I never knew about box-sizing: border-box. Good to know that the default is box-sizing: content-box and when you don't want padding to affect the size, use border-box
OMG - I was not aware that margins don't collapse in grid and flex boxes!!
Thanks!!
Thanks so much for making this serie, it totally makes sense to me now, and the tips are super helpful.
Nice tutorial. The only thing missing was a little talk about negative margins. They can come in handy sometimes ;)
This is a revelation! Nobody else showed this.
Really glad to hear it helped you out :)
very helpful and explained a lot than other videos out there, good job!!!
I ran into this when making a tutorial for beginners. So strange, I probably run into this pretty often
Thanks Kevin. You've helped with padding problem.
Thank you for sharing all this! You have great tutorials for beginners like me, I actually understand what you're talking about!! Thank you :)
Awesome, so glad they've helped!
Awesome video Kevin, quite deep yet clear to understand! Good job
You seriously cleared up so much confusion for me
Really clear demo here.
Yes my official goal is to be a css master, but my real goal is to watch every single video Kevin has ever made.
Crazy kevin.. i love your teaching..
Thanks for sharing it. so helpful. I'm always confused about margin and padding. lol
Glad you enjoyed it!
Woaahh... Where were you when I was wasting hours and hours debugging weird margin behavior? Good video. Especially the collapse and reset thing.
Haha, I've been there wasting hours of my time debugging the strangest and simplest things in the past. Hopefully I can help people not have to do the same :)
These videos are so helpful!
Awesome tutorials! I've found that when I set widths as percentages on children elements of parent elements whose box-sizing is set to border-box, the result was surprising at first. The width percentage on the child element will be a percentage of the parent's content width, not total width. So in your example at the end, if the total width of the parent is 200px, but the content-width is 120px (200px total width minus 30px padding-left minus 25px border-left minus 25px border-right = 120px content-box width), and then I set a percentage width on a child of that box, say 80%; that 80% is calculated based on the 120px, NOT the 200px total width. Has this ever taken you by surprise?
Hm I’ve never noticed this. I’m mostly using flex or grid though and still haven’t figured out how borderbox works on flex items, I keep getting conflicting answers when I look into it or ask.
Thank kevin, u r indeed very experienced.
Box-sizing made me smile
Thank you!! I finally got this 💓🙏
Thanks for the explanation, I'm a Russian beginner and all my friends who are experienced in programming told me to use tutorials in English, because they are better than Russian ones. So it might be true, because some topics are covered and explained much better.
p.s BTW your voice and pace of speaking are good and a bit remind me of Roman Mars, maybe you've heard of this man.
I am so old I can remember days when using wildcards in css and id attributes in html was considered a performance issue.
Pretty awesome! I didn't know that. Love your channel!
Thank you so much! Super helpful!
Thanks for your time
thankz for your great way of sharing info !
"Inspect element"
6th graders: *The Expert*
Cool and very useful!
Thank you for the high quality content, I just wish I would enjoy CSS more I love doing the backend stuff also JavaScript but I don't have the creativity the get some own designs, that's really another way of thinking than doing problem solving
Fantastic series!
Thanks Stephen!
Hi Kevin, thanks so much for the tutorial, am learning alot brushing through these basics after some years. One quick question. Do images have default margins? And also do they experience collapsing margins especially when you do resets on images like you usually do by setting images to display:block
you saved my life!
Very helpful informations as always. Thank you
I was really wanted tutorial like this
Thank you kevin, this is so helpful!
best tutorials 😁
Thanks! 😀
Definitely learned. OMG your the best. Thank you very much.
your teaching method is good thank you for the effort
Great tutorial!
7:14, I'm still confused as to how does the top padding of the demo-box creates a separation between the demo-box and the one box. Why isn't it a padding-bottom of the demo-box instead?
You post awesome tutorials... From your tutorials only .. I learn a lot... Can you please post a video on inline block and how vertical align works with inline block... And what is actually inline block...
Ever one say that inline block that an inline element which takes padding margin width and height.. But i think its more than that..please do post a video...
Thanks for the suggestion!
To Summarise:-
1) When Margins of two elements touch each other they collapse and merge into each other (even between Parent and Child Element) and then Margin of only one Element works.
2) This Collapsing Property is not present with Padding and will never merge.
3) To get rid of this Problem, use little padding as a separator between two elements as Padding doesn't collapse.
4) To make your life easy, use Presets ( margin: 0; padding: 0; box-sizing: border-box; )
5) There is no such thing as margin-box or padding-box cuz no browser supports that.
Bonus Point:-
Use Inspector Tool to check where your Margins and Paddings are actually going.
THANK YOU! :) Yes you helped a lot! Just subscribed to your channel!
Have a nice day,
Fritz
Great explanation thanks very much!! I would like to know how to center (display: blocks, inlines, inline-blocks) vertically and horizontally in automatic way? pls make this video!
i just straight love you
Amazing content. Thank you!
Dude ! you have a Hollywood smile … keep on that
Thanks a lot!!!!! For this video
Amazing work with these tutorials, although I've been following Angela Yu's paid udemy course, which is a great course, there are aspects in which you go into far more detail than she, so this is really a great help, thank you!
#Excelent!
Thanks a lot from Brazil.
I really liked it because I want to improve my Front-end skills.
English is not my native language, but even for me it's very clear explanation, thanks so much.
Glad to hear that Mikhail!
thank you, that was helpful
Awesome stuff. There are countless vids about what collapsing margins are, but You, as always show, what does it MEAN for us. I spent last few days digging this topic, but drop-shadow example at 4:30 was a WOW-thing for me. Another priceless-knowledge-vid. BTW: I like to fork interesting codepens to make my own note-comments. I can't fork these codepens, are they protected in some way? Once again: thank you, thank you aaand thank you!
So glad to hear that you got something from the video! Sorry about the forking thing, I make the videos ahead of time and mark them as private, I'll have to go through and update them to public.
Merci, merci et merci encore, j'adore tes videos !!!
De rien 😀
If you are using Internet Explorer or Safari, use them for what they were designed to do i.e. download Chrome or Firefox.
Just apply -> display: flow-root; on the parent container. This should fix it.
@John MX
Kevin is using CodePen for these videos.
good explanation
Thank you 🙏
Really like the tutorial thanks!
Hello Kevin, Thanks so much for the tutorials. It really help me a lot. Would you be able to discuss about CLEARFIX and whats its scope or when to apply it? :)
You'd want to use the clearfix in layouts where you're using floats, which shouldn't be very often these days.
It's used to help controls layouts with floated items, as when we float multiple items, the element they are inside collapses. Clearfix stops that, more or less.
Thanks Kevin ^_^
Great video!
Thank you