Good tutorials, Kevin. Please, don't ever quit RUclips, 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!
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 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!
You sir, you have one of the best front end RUclips 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.
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!
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 :)
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.
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 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
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...
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 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.
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?
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.
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 RUclips, 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!
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!
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!
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!
You sir, you have one of the best front end RUclips 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
That was all so well explained, thank you Kevin. I always wondered why it was called "border-box", now I know. Excellent - cheers
4:45. Kevin, you coined the international web developer’s motto: “We live to get around it.”
you are a life saver. I was literally scratching my head off due to this annoying collapsing border thing. thanks a lot man. 💖
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!
These videos are so helpful, thank you! They really help to clear some confusion that I previously had.
So happy to hear that Banalitude!
So many questions I didn't even know how to ask correctly have been finally answered!
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.
Margin and padding are not bad things anymore, go ahead Mr. king of CSS.
You've done an excellent job of explaining the collapsing phenomena
You is the man! I took a breath of relief after watching this!
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.
That was really helpful. You are indeed a great tutor.
Really appreciate your quality work.
oh man you save my whole night from being wasted on these problems in 22 minutes. Thank you for your great presentation sir
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!!!
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.
4:35 Found myself flabberghasted by this exact behavior before I found your video. Thank you for saving my sanity Kevin.
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
Nice tutorial. The only thing missing was a little talk about negative margins. They can come in handy sometimes ;)
4:20 thanks for showing this.I recently ran into this problem
I was going through your videos and found this. Great tutorial, I'm a little stronger on the server side so this helps. Thanks!
Very good video. This is much more understandable than a similar one you made specifically on border-box.
You're the man, Kevin! Thank you.
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.
Kevin, you are the best.
Thank for yout tutorials Kev! They helps me a lot!
Thanks Kevin! Your videos are always very helpful. This explains a lot!
Thanks so much for making this serie, it totally makes sense to me now, and the tips are super helpful.
This is a revelation! Nobody else showed this.
Really glad to hear it helped you out :)
Thanks Kevin. You've helped with padding problem.
I ran into this when making a tutorial for beginners. So strange, I probably run into this pretty often
OMG - I was not aware that margins don't collapse in grid and flex boxes!!
Thanks!!
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!
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
You are such a great lecturer in my life.
Really clear demo here.
very helpful and explained a lot than other videos out there, good job!!!
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 :)
Thank kevin, u r indeed very experienced.
Thanks for sharing it. so helpful. I'm always confused about margin and padding. lol
Glad you enjoyed it!
You seriously cleared up so much confusion for me
Awesome video Kevin, quite deep yet clear to understand! Good job
Thanks for your time
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.
Crazy kevin.. i love your teaching..
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.
These videos are so helpful!
Yes my official goal is to be a css master, but my real goal is to watch every single video Kevin has ever made.
Thank you!! I finally got this 💓🙏
Thank you so much! Super helpful!
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
I am so old I can remember days when using wildcards in css and id attributes in html was considered a performance issue.
thankz for your great way of sharing info !
Box-sizing made me smile
Pretty awesome! I didn't know that. Love your channel!
Cool and very useful!
Fantastic series!
Thanks Stephen!
you saved my life!
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!
Very helpful informations as always. Thank you
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 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!
Thank you kevin, this is so helpful!
Definitely learned. OMG your the best. Thank you very much.
best tutorials 😁
Thanks! 😀
your teaching method is good thank you for the effort
i just straight love you
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!
Thanks a lot!!!!! For this video
I was really wanted tutorial like this
thank you, that was helpful
Amazing content. 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.
#Excelent!
Thanks a lot from Brazil.
I really liked it because I want to improve my Front-end skills.
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?
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.
Merci, merci et merci encore, j'adore tes videos !!!
De rien 😀
THANK YOU! :) Yes you helped a lot! Just subscribed to your channel!
Have a nice day,
Fritz
Dude ! you have a Hollywood smile … keep on that
good explanation
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 🙏
Really like the tutorial thanks!
Great video!
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 ^_^
If you are using Internet Explorer or Safari, use them for what they were designed to do i.e. download Chrome or Firefox.
"Inspect element"
6th graders: *The Expert*
@John MX
Kevin is using CodePen for these videos.
Just apply -> display: flow-root; on the parent container. This should fix it.
Thank you