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!
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
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.
Exactly! Sometimes I prefer watching the indian tutorials because they get straight to the point (even though I don't speak Hindi I somehow learn visually)
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.
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. :)
Oh man, I totally should have mentioned giving it a width for that to work, totally missed the mark on that. Thanks for mentioning it though, I'll add it in the description of the video. I always liked the concept of BEM, but the whole double underscore thing sort of annoyed me, but the more complicated projects you work on, you start to see the benefit of it all. I'm happy I'm playing around with it now, and I think it's won me over at this point.
One thing I have bumped into recently was padding and or margin was causing my elements to break out of the container when using grid. Not quite sure why they wanted to do that. I thought with grid. If the size of he object or the margin or padding got to wide it would auto go on to next column. Maybe I was mucking something up
Nah, things will overflow outside of their cell if they are bigger than the cell. By default, something will be taking up one row and one column, it won't automatically assume that it should actually take up two. That *could* be a cool behaviour, but I could also see it causing some problems.
Great job Kevin, very clear video. A couple questions seem to arise though...does it seem strange that css defaults div boxes to the upper left hand corner? Like why wouldn't it default to any other alignment, say centered, or to the upper right corner, or lower left corner? Is that just per the spec--and if so where can we view the spec details themselves? My initial guess was CSS mimics the left to right nature of western languages, but then why does CSS stack the boxes in a column and not in a row, again as western languages do? Any thoughts are greatly appreciated.
Divs are block-level elements. Any block level element automatically starts a new line of content and takes up the full width of its parent (by default). This is also why it stacks things, because block-level elements automatically start a new line of content, whereas inline and inline-block elements do not. A div behaves the same way as a paragraph, they are both block-level. If paragraphs created columns instead of new rows of content, that would be a pain! If we give it a set width, then yes, it's on the left side. It starts at the top because, well, I'm not 100% sure where in the specifications it talks about that, but if it didn't it would be hard to build a website (from bottom to top???). I could be wrong, but starting from the top makes it a lot easier than anything else, that way our content follows the flow of the HTML we're writing. As far as it being on the left, if we give it a width, yes, it's on the top left. However, like you said, if you set your site up for a right-to-left language, it would go to the top right, instead of top left (you can read more on that here: www.w3.org/International/questions/qa-html-dir ). This, I think, makes a lot of sense. As far as the documentation, w3.org is where all of it would be, in relation to the standards, though I often find that the MDN is much more user-friendly as it includes examples and browser support tables, as also links to both the existing standard, as well as working drafts for future implimentations - developer.mozilla.org/en-US/
Hi , can you help me with a website i build I have a problem with show more bottom and the position of the bottom. If u will I'll show you the code and pic for the problems please help me
This is going to seem like a stupid question, (and more than likely is). But, if you set for values for the margin ( say 100 50 100 50 and it sets these in a clockwise fashion, you then erase the last one so it is now 100 50 100, why would css use the 50 value instead of just using the default (since there is no value assigned to it)? Yes i am VERY new to all of this. (HTML, CSS...all of it.)
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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!
You summed it up the entire video in a couple of sentences. I think I could have made this shorter, lol.
Someone's taking notes!
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
You're very welcome Closet Grasshopper! Really glad that you like the video and how I present my stuff :)
@shashanka Mg pretty sure she was referring to the “computer science nerd” as the one with no social skills.
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.
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!
Welcome aboard!
Ah, finally someone that gives it loud and clear with no confusing metaphors.
Exactly! Sometimes I prefer watching the indian tutorials because they get straight to the point (even though I don't speak Hindi I somehow learn visually)
Thumbs up for every series. Helping many of us especially those who just beginner
Thanks a lot, and I'm happy to help 😁
Thanks for your work, Kevin. Very clear explanation. Looking forward to the third video! very interested in your thoughts about real life cases!
Thanks Ivan, glad you liked it. And that video will be out Friday, so not too long to wait 👍
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.
Excellent tutorial, there are so many tutos here but this one goes deeper and I finally got it after many years of confusion
Now I understood completely!
Thanks for the detailed video on the topic.
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. :)
Oh man, I totally should have mentioned giving it a width for that to work, totally missed the mark on that. Thanks for mentioning it though, I'll add it in the description of the video.
I always liked the concept of BEM, but the whole double underscore thing sort of annoyed me, but the more complicated projects you work on, you start to see the benefit of it all. I'm happy I'm playing around with it now, and I think it's won me over at this point.
I finally get he margin: auto statement. Thank you so much!
A very straight and clear explanation video! thank you!
Thanks, glad that you liked it!
I just loved this series and the way you explained it easily.Looking forward to watch next :)
Thanks Benjir, glad you liked it :)
mind blown!
I nominate you teacher of the year
Thanks so much 😊
Thank you very much for explaining this.
I was really struggling with this but now it's all clear.
Kevin ... Your the best, period. Thanks a lot
Thanks Kevin for clarifying this 👏🏽
he literally took oversimplification to another level, I wish all my teachers were like you🥲thanks a bunchhh
Beautifully Explained. Thank You.
I am a full stack developer bodge together website and i have no fing clue what im doing with css but your videos help me a lot thank you
Yeah I got this. Choose according to your need. If you are done with margin, stick with it. If padding can do it, use padding.
You are a great teacher. Thank you, teacher!
I was looking for this , yeah this is it thank you.
Feel lucky to know you from the very beginning I learn CSS
One thing I have bumped into recently was padding and or margin was causing my elements to break out of the container when using grid. Not quite sure why they wanted to do that. I thought with grid. If the size of he object or the margin or padding got to wide it would auto go on to next column.
Maybe I was mucking something up
Nah, things will overflow outside of their cell if they are bigger than the cell. By default, something will be taking up one row and one column, it won't automatically assume that it should actually take up two. That *could* be a cool behaviour, but I could also see it causing some problems.
Very informative, thanks Kevin!
Thank you. Do you recommend using background or background-color when setting a colored background?
first time to know the difference... thanks
Thank you for the clear explanation.
Great job Kevin, very clear video. A couple questions seem to arise though...does it seem strange that css defaults div boxes to the upper left hand corner? Like why wouldn't it default to any other alignment, say centered, or to the upper right corner, or lower left corner? Is that just per the spec--and if so where can we view the spec details themselves? My initial guess was CSS mimics the left to right nature of western languages, but then why does CSS stack the boxes in a column and not in a row, again as western languages do? Any thoughts are greatly appreciated.
Divs are block-level elements. Any block level element automatically starts a new line of content and takes up the full width of its parent (by default). This is also why it stacks things, because block-level elements automatically start a new line of content, whereas inline and inline-block elements do not. A div behaves the same way as a paragraph, they are both block-level. If paragraphs created columns instead of new rows of content, that would be a pain!
If we give it a set width, then yes, it's on the left side. It starts at the top because, well, I'm not 100% sure where in the specifications it talks about that, but if it didn't it would be hard to build a website (from bottom to top???). I could be wrong, but starting from the top makes it a lot easier than anything else, that way our content follows the flow of the HTML we're writing.
As far as it being on the left, if we give it a width, yes, it's on the top left. However, like you said, if you set your site up for a right-to-left language, it would go to the top right, instead of top left (you can read more on that here: www.w3.org/International/questions/qa-html-dir ). This, I think, makes a lot of sense.
As far as the documentation, w3.org is where all of it would be, in relation to the standards, though I often find that the MDN is much more user-friendly as it includes examples and browser support tables, as also links to both the existing standard, as well as working drafts for future implimentations - developer.mozilla.org/en-US/
Please correct me if i am wrong
Margin creates space outside the element with the content on the inside and padding creates space on the inside?
Awesome explanation love It ❤️
Good stuff. Well explained
Great video, Kevin.
great vid!
Hi kevin, thanks for the awesome videos. It helps me alot. :)
Glad to hear that Ameen!
I appreciate your videos so much. Thank you
Hi , can you help me with a website i build I have a problem with show more bottom and the position of the bottom. If u will I'll show you the code and pic for the problems please help me
KING OF CSS!
welll done sir i was struggling with this property
very useful, thanks! However you mentioned margin-left and margin-right 0 will centre it across the screen at the 12.03 minute mark. Is that right?
Thanks for the good tutorial.
No, thank you, Mr Powell. You're awesome, not a little bit.🤝
This is going to seem like a stupid question, (and more than likely is). But, if you set for values for the margin ( say 100 50 100 50 and it sets these in a clockwise fashion, you then erase the last one so it is now 100 50 100, why would css use the 50 value instead of just using the default (since there is no value assigned to it)? Yes i am VERY new to all of this. (HTML, CSS...all of it.)
Great explanation.
So i can use margin to change the position right?
loved the explanation..tysm buddy..
man can't thank u enough legend
man!you explain like a bosss!!
Thanks! Super glad you liked it!
perfectly explained ✅
ive been curious about how gap also fits into this
I don't see a link to the codepen.
Hi Kevin please make video series on JavaScript from beginners to expert level .....please
I'll be making and using JavaScript more, but I think a whole series would kill me, haha. There is just sooooo much to cover.
Best explanation!
Hi, thanks a lot for sharing your knowledge: you 're helping me!! :-)
Thanks for your time
Thanks for the teaching. Looks like the thumb nail for this video has a misspelling.
Best video, thank u very much
Thank you Kevin.
Thks From Lisbon - Portugal
Hi Kevin, thank you for this video brother. I subscribed. Your videos are the best. Can you please show how to create a one page scroll
thank you uncle 🙏🏼
A thanks from an Indian ❤️
10:50 margin top : auto = 0
margin bottom : auto = 0
The thumbnail says Bascis. Is it intentional or no one noticed in 3 years ?
Just for the observer, you never actually answered the question when to use one versus the other. Great tutorial though.
It's not always so simple, but I like to look at it as padding for more background, margin for extra space.
Thank you very much Kevin!!!!!!
No problem!
Thanks for that Sir.
hats off to u sir!
You are the best !
my mam used to say, "never trust a man who does a spelling mistake in a thumbnail"
pls make a video about borders!!
What do you want to know about borders? I generally don't do much with them, so I'm curious :)
Your title card is misspelled
what to say. you're so awesome
the very BASCiS !!! ???
Margin does not affect element width, its just border and padding, no?
so padding is basically height & width in an alternative way
A more dynamic way, yes :) - will adjust to your content, which is nice.
Thank you!
thank you so much!
thought this was about stocks.. i was eating then was sooooo confused when he started coding lmao oops wrong video
Your thumnail for this video has a Typo
your video's, maks me feel, that I have progess
Sweet, thanks
No problem 👍
very helpful. but the image is "the very bascis" :)
Thank you
Thankyou sir
Thanks =)
damn, i wanmted you to explain border
It is good.
Thanks, glad you liked it :D
💥🌹
"Deep Dive: The Basics" LOL
Gotta start somewhere with the deep dive 😁
No I was just laughing at the oxymoron, great video though!
B A S C I S
Black deep!!
On the thumbnail
I think its "basics" not "bascis"
🤣🤣🤣
it works very, exactly, much the same... hahahah, oookay.
.
come on, why do you need to have a 2 min introduction of basically nothing about the topic
thank you so much!!!