I love the fact you actually go straight to the point i know this was 1 year ago but this actually still helped me a LOT i was like “What the hell is margin and padding? But then i saw this thanks a lot ❤
1. Don't forget defaults and inherits. Unless specified otherwise here www.w3schools.com/cssref/css_default_values.asp the default margin and padding will be zero. 2. Where an element has a default property value, e.g. has a default _padding-left: 40px;_ : here you must override it explicitly, e.g. _nav ul { padding: 0; }_ to establish it otherwise.
I do not trust anything from w3schools. They have been found to have erroneous information or be missing key items far too often. Yes, elements have default values. The default values are not always the same in all browsers. That is why there have been so many CSS reset and normalize stylesheets created. Many elements will have non-zero default values for padding and/or margin. I will typically add my own reset values for padding and margin to zero them out and then only add the specific values where and when I want them. However, this video is only about how margin and padding work as part of the box model not default values or best practices for CSS. I have another video on specificity - ruclips.net/video/Kz_S4Nk4qyI/видео.html and another about the Cascade where I talk about inheritance - ruclips.net/video/PigxOyVDIQg/видео.html
Nice video Steve. I have difficulty in understanding the margin collapsing in nested block elements and with negative margin, I can't understand how the position of blocks change. Example, div{border:1px solid blue;} .container{background-color:yellow; margin:40px;} .box{background-color:orangered; margin:40px; } change margin When I added "margin-top: -50px;" to .box selector, I can't understand how two boxes position changes than before when I didn't change the margin. I checked without border too for margin collapsing, but couldn't understand. Please make a video on this topic.
Negative margins are actually quite rare. They used to be used a lot with float to create columns. Now people use flexbox and grid to accomplish this. Try this CSS to see if it makes more sense: .container { background-color: yellow; padding: 40px; margin: 40px; } .box { background-color: orangered; padding: 0; margin: -40px 40px 40px 40px; }
If you need to style the size of the image that you are using for your list bullets then you should use a background-image and scale it as you want with li::before{ }
Do margin collapse happen in relatively positioned element? I didn't see such case. MDN only mentions margin collapsing won't happen in absolutely positioned element.
The margin collapse is applied only to the original space for the element. With relative positioning, the original space is saved, the element gets removed from the page while the rest of the page is built, and then put back in the original position with any translations with transform, top, left, etc.
I switched over to VSCode in 2018 and haven't used Brackets since then. I highly recommend that all my students do the same. Emmet is built into VSCode. Here is a video about VSCode - ruclips.net/video/FxRBjgTgudw/видео.html I did make this video about Brackets back in 2017 - ruclips.net/video/yblM56mx2MU/видео.html
What's for the Margin when you make another space at the top right bottom and left? Like Is it overlapping by its default then you type margin 10px on the screen. And I want to know more about margin and padding I am practicing at it.
Great video! What about negative values for margins and padding? Would it just go beyond the space? If I set my padding values to negative, would the words go outside of the blue box?
0:14 Paragraphs have margins by default, isn't it the space we see between two paragraphs before you did anything ? But it should be white not blue, margins are transparent... Margins of HTML text containers act weird.
I have zeroed out all the default values in the other CSS value so that I could explain what the padding and margin are without the defaults confusing everything.
While checking in MDN, I found that margin-top and margin-bottom have no effect on non-replaced inline elements. What are these replaced and non-replaced elements, can u explain in your video?
developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element replaced elements are elements whose content is not impacted by your CSS - video, , img, etc. inline vs block elements - can be explained through this video - ruclips.net/video/UBWl37Rr9_c/видео.html
hello sir i am having an issue compressing them vertically , i have the list of my audio files inside my body tag with margin , but i cannot compress them to become closer .. my example would be the white lines inbetween all of your blue boxes but so much larger , please help me out bro much appreciated
Every tag has the box model box around it. If you have space then you have padding or margin around some element or you have large line height. Use the dev tools in chrome to investigate
Why margin top/bottom do not get add to each other but left/right do, sir. Ex: If two of this top on each other .one{ margin-bottom: 20px} .two{margin-top:10px} So the margin between these will be 20px But if those sit next to each other .one{mg-right:10px} .two{mg-left:20px} Then margin between them will be 30px I read that margin top bottom will not be added, but left right they will. But I still a little bit confuse
They both have a specific purpose. Padding extends the background colour away from the text content. Margin creates space between elements. The difference only disappears if you have no background colour on your element. Margins collapse vertically so you should use those to create vertical space between elements. Beyond that, the most important thing is to be consistent. Have a standard way that you always use to create your space. And always follow that. Don't randomly pick one of the properties to use on each element.
The size of the box is the sum of margin, border, padding and width. If you want to make one bigger without changing the size of the box then one of the other values must change. The relationship of the width to the other values can also be altered with the box-sizing property.
really Love, nice, and what a great explanation... but sir, can i fill the value with %, rem, em, or we have to fill it with number only ?? and thanks in advance sir...
paragraphs have a default margin on top and bottom of 1em. How come the background color does not have that 1em margin between each of the paragraphs? I wrote the same code out that you have at the beginning of this video in code pen and I see a margin between each of the three paragraphs.
what I mean is I see a small white gap between each of the paragraph's background colors. But at the beginning of your video, there is no small white gap between each of the cornflowerblue backgrounds. Does this make sense?
@@SteveGriffith-Prof3ssorSt3v3 Thank you for answering. I'm still confused. Here is a link to the codepen I made: codepen.io/TromboneCode/pen/GRmWXmY The only way I can get the background-color of cornflowerblue to not be interrupted by the inherent margin on the top and bottom of paragraphs is if I put that background-color on the element itself. In your example it looks like you're putting the background-color on the elements. When I do it the way you have it written, there is an inherent margin of 1em between the top and bottom of each of the backgrounds due to the user-agent stylesheet.
Perhaps the external CSS stylesheet you're linking in has a background-color of cornflowerblue on ? but if that's the case, why would you explicitly add the same background-color to the elements in your internal CSS? Wouldn't that background-color display without needing to add it to the elements? I'm new to CSS so I really appreciate your video and your response.
@@joemcdonough2510 I had another attached stylesheet that removed the defaults. Defaults always cause unexpected confusion. I tend to use reset stylesheets when building sites because the defaults are different in different browsers. I teach my students to zero out all the padding and margin values and then only add them explicitly where they want them. That and to use box-sizing: border-box; *, *::before, *::after{ box-sizing: border-box; padding: 0; margin: 0; }
You should have put a colored box to enclose the content to show how the margins are applied and the padding as well. Just pointing your mouse in the area and telling the viewers "this is x margin blah" is difficult to assess.
I'm using embedded CSS in most of my tutorials because it keeps everything on the screen at the same time and makes it easier for people to see. Embedded is ok for temporary use and for testing. Inline styles are when you use the style attribute inside an HTML element. Neither of these things should ever be used in a production setting.
I finally understood! Thanks a lot! That 'clock-wise rotation' words immediately cleared out my all confusions!
You just made more sense in seven minutes than the last two hours of me studying in school. Thank you!
ikr
Same!!!
You're like the Bob Ross of Web Dev. Thank you for posting this.
i've watched countless tutorials on this only to feel more confused and losing the point. you have a talent for teaching. subscribed!
This was the BEST explanation of margins and padding! THANK YOU!!
One of the best Tutorials out there! Thank you Steve for helping out millions of students across the globe.
I know it’s been years you posted this but you’re so calm, well explanatory and you makes a lot of senses.. thanks Steve 👏🏻
This is the best explanation in the internet for margin and padding, thank you Steve for the lesson.
i've been trying to get padding and margin for the last 2hours but this video made the understanding much easier in less than 5mn ! thanks a lot
I love the fact you actually go straight to the point i know this was 1 year ago but this actually still helped me a LOT i was like “What the hell is margin and padding? But then i saw this thanks a lot ❤
Short, concise and to the point. Much obliged kind sir!
Hey thanks man! as someone whos only recently started learning HTML and CSS this video was really helpful.
amazing explanation, opened a locked door for me as a beginner. Thank you
Excellent video! short yet very coherent
Such a good explanation , it really helped me as visual learner.
You're great pal, great explanation, your very calmed voice made me put more attention, great video.
Thank you so much steve, the way you explained was so simple and understandable!
Hats off to you
these 7 mins tells everything i want to know
wow you shoud a teacher the way u explain things very smooth
I am a full-time professor. :)
@@SteveGriffith-Prof3ssorSt3v3 lucky students
you deserve more mate, it was the best lecture i have ever had in my life, hitting sub
Now i an actually understanding css coz of you... Hope to complete whole playist thus week :)
Your voice is so calming
Really appreciate this lecture, you are the best👍😃
Best Tutorial Ever, thank you so much
Wow brother, thank you I was having trouble understanding margins and padding. I feel more at ease now.
Woww oh my God.i got the whole of it in minutes.. Thank you bro
Thanks. I"ve just begun and it helped me to adjust text in a list in a centre of the background picture!
Best tutorial, totally clear 👌 Thanks!
i don't have left any confusion about padding and margin after watched this.
2:08 correction
" 30 pixels "
Yes. Thanks. 40px would be the value if added. The actual will be 30px.
Best lecture I have ever seen👍👍
Thank you, well explained with much calmness
Wow. Now i understand what is difference b/w them. Thanks
Love the way you teach. It’s like a master class. Thank you for this.
Ricky Bubbles Julian Randy! TPB is the best!
Use larger numbers so that people can clearly see the change happening.
I subscribe your channel because you made this video very informative. Plz use this teaching skills in all your video. From my side you are 10/10.
Thank you, Steve! Short and to the point.
great explanation, thank you so much! Makes way more sense now
Best explanation ever...
Very enjoyed watching this video while learning a lot as well
Saving my life again and again... Thank you!
Just started learning..its so useful..Thank you
idc how old this video was. But it makes sense
This makes so much sense now thank you.
Really good Tutorial. it was awesome.
Uncountable thanks! Extremely Helpful.
Your voice is so brilliant.
damn he sounds just like tom hanks
1. Don't forget defaults and inherits.
Unless specified otherwise here www.w3schools.com/cssref/css_default_values.asp the default margin and padding will be zero.
2. Where an element has a default property value, e.g. has a default _padding-left: 40px;_ : here you must override it explicitly, e.g. _nav ul { padding: 0; }_ to establish it otherwise.
I do not trust anything from w3schools. They have been found to have erroneous information or be missing key items far too often.
Yes, elements have default values. The default values are not always the same in all browsers. That is why there have been so many CSS reset and normalize stylesheets created. Many elements will have non-zero default values for padding and/or margin. I will typically add my own reset values for padding and margin to zero them out and then only add the specific values where and when I want them.
However, this video is only about how margin and padding work as part of the box model not default values or best practices for CSS.
I have another video on specificity - ruclips.net/video/Kz_S4Nk4qyI/видео.html
and another about the Cascade where I talk about inheritance - ruclips.net/video/PigxOyVDIQg/видео.html
Nice video Steve.
I have difficulty in understanding the margin collapsing in nested block elements and with negative margin, I can't understand how the position of blocks change. Example,
div{border:1px solid blue;}
.container{background-color:yellow; margin:40px;}
.box{background-color:orangered; margin:40px; }
change margin
When I added "margin-top: -50px;" to .box selector, I can't understand how two boxes position changes than before when I didn't change the margin. I checked without border too for margin collapsing, but couldn't understand.
Please make a video on this topic.
Negative margins are actually quite rare. They used to be used a lot with float to create columns. Now people use flexbox and grid to accomplish this.
Try this CSS to see if it makes more sense:
.container {
background-color: yellow;
padding: 40px;
margin: 40px;
}
.box {
background-color: orangered;
padding: 0;
margin: -40px 40px 40px 40px;
}
Nice, very helpful and very easy to understand! Thank you very much!
you have amazing relaxing sound .
Thanks for posting this.....It was very helpful... : )
Can you resize the image you are intending to use for the list-style image?? I will all appreciate your guidance. It gets bigger on my screen. Thanks
If you need to style the size of the image that you are using for your list bullets then you should use a background-image and scale it as you want with li::before{ }
@@SteveGriffith-Prof3ssorSt3v3 thanks so much steve
This tutorial was dope!! Thank you
Excellent explanation. Thank you!
Very useful video. Thank you!
Do margin collapse happen in relatively positioned element? I didn't see such case. MDN only mentions margin collapsing won't happen in absolutely positioned element.
The margin collapse is applied only to the original space for the element. With relative positioning, the original space is saved, the element gets removed from the page while the rest of the page is built, and then put back in the original position with any translations with transform, top, left, etc.
Thank you so much! nice simple and well explained.
Hey steve, do you have a tutorial on how to set up Brackets? Just like you have it. I'm confused.
I switched over to VSCode in 2018 and haven't used Brackets since then. I highly recommend that all my students do the same. Emmet is built into VSCode. Here is a video about VSCode - ruclips.net/video/FxRBjgTgudw/видео.html
I did make this video about Brackets back in 2017 - ruclips.net/video/yblM56mx2MU/видео.html
thank you, sir. that was really helpful
What's for the Margin when you make another space at the top right bottom and left?
Like Is it overlapping by its default then you type margin 10px on the screen. And I want
to know more about margin and padding I am practicing at it.
I don't understand your question.
Awesome bro❤️❤️👍
Great video! What about negative values for margins and padding? Would it just go beyond the space? If I set my padding values to negative, would the words go outside of the blue box?
Negative padding doesn't work but negative margins will pull the box in different directions.
@@SteveGriffith-Prof3ssorSt3v3 Thank you! I'm new to HTML and was confused with margins and padding when I put in negative values
0:14 Paragraphs have margins by default, isn't it the space we see between two paragraphs before you did anything ? But it should be white not blue, margins are transparent... Margins of HTML text containers act weird.
I have zeroed out all the default values in the other CSS value so that I could explain what the padding and margin are without the defaults confusing everything.
great... understood clearly. thanks!
Cant be more clear thanks a lot
It is pretty clear. Thanks
While checking in MDN, I found that margin-top and margin-bottom have no effect on non-replaced inline elements. What are these replaced and non-replaced elements, can u explain in your video?
developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
replaced elements are elements whose content is not impacted by your CSS - video, , img, etc.
inline vs block elements - can be explained through this video - ruclips.net/video/UBWl37Rr9_c/видео.html
@@SteveGriffith-Prof3ssorSt3v3 thank you.
hello sir i am having an issue compressing them vertically , i have the list of my audio files inside my body tag with margin , but i cannot compress them to become closer .. my example would be the white lines inbetween all of your blue boxes but so much larger , please help me out bro much appreciated
Every tag has the box model box around it. If you have space then you have padding or margin around some element or you have large line height. Use the dev tools in chrome to investigate
Why margin top/bottom do not get add to each other but left/right do, sir.
Ex:
If two of this top on each other
.one{ margin-bottom: 20px}
.two{margin-top:10px}
So the margin between these will be 20px
But if those sit next to each other
.one{mg-right:10px}
.two{mg-left:20px}
Then margin between them will be 30px
I read that margin top bottom will not be added, but left right they will. But I still a little bit confuse
Top and bottom margins collapse. They overlap and the larger value is used.
Great work
One question left... If no border, when to use margin versus padding. There seems to be a big debate about the topic. Any pointers or opinion?
They both have a specific purpose. Padding extends the background colour away from the text content. Margin creates space between elements. The difference only disappears if you have no background colour on your element.
Margins collapse vertically so you should use those to create vertical space between elements.
Beyond that, the most important thing is to be consistent. Have a standard way that you always use to create your space. And always follow that. Don't randomly pick one of the properties to use on each element.
Thanks a lot. Appreciate it much, Brother.
Thanks! love your voice
crispy clear. thank you
Pls is padding possible without changing the size of the outer div, if not, how can u move the text without changing the outer div size, thanks
The size of the box is the sum of margin, border, padding and width. If you want to make one bigger without changing the size of the box then one of the other values must change.
The relationship of the width to the other values can also be altered with the box-sizing property.
really Love, nice, and what a great explanation...
but sir, can i fill the value with %, rem, em, or we have to fill it with number only ??
and thanks in advance sir...
You can use any unit you want.
Thanks Sir it really helpful
no quetions only RESPECT.
Thanks a lot
wow i think i understand frontend now haha!!! Thanks!!!
Anyone agree that Steve's voice should be part of siri /google assistant?
very much appreciated..thank you for your enlightenment :D
5:45 bars my dude
paragraphs have a default margin on top and bottom of 1em. How come the background color does not have that 1em margin between each of the paragraphs? I wrote the same code out that you have at the beginning of this video in code pen and I see a margin between each of the three paragraphs.
what I mean is I see a small white gap between each of the paragraph's background colors. But at the beginning of your video, there is no small white gap between each of the cornflowerblue backgrounds. Does this make sense?
@@joemcdonough2510 margins always have a transparent background. Padding shows the background colour of the element.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for answering. I'm still confused. Here is a link to the codepen I made: codepen.io/TromboneCode/pen/GRmWXmY
The only way I can get the background-color of cornflowerblue to not be interrupted by the inherent margin on the top and bottom of paragraphs is if I put that background-color on the element itself. In your example it looks like you're putting the background-color on the elements.
When I do it the way you have it written, there is an inherent margin of 1em between the top and bottom of each of the backgrounds due to the user-agent stylesheet.
Perhaps the external CSS stylesheet you're linking in has a background-color of cornflowerblue on ? but if that's the case, why would you explicitly add the same background-color to the elements in your internal CSS? Wouldn't that background-color display without needing to add it to the elements? I'm new to CSS so I really appreciate your video and your response.
@@joemcdonough2510 I had another attached stylesheet that removed the defaults. Defaults always cause unexpected confusion.
I tend to use reset stylesheets when building sites because the defaults are different in different browsers.
I teach my students to zero out all the padding and margin values and then only add them explicitly where they want them. That and to use box-sizing: border-box;
*,
*::before,
*::after{
box-sizing: border-box;
padding: 0;
margin: 0;
}
Best video 👍👌
really helped me a lot
how can we move a text toward center left .I tried but didnt get it
ruclips.net/video/FMLj-0vGSsI/видео.html
ruclips.net/video/sLAunIX5RXw/видео.html
These should help.
appreciate your work!
At last I understood! tnx
What IDE do you use? It's very minimalistic.
Brackets - ruclips.net/video/yblM56mx2MU/видео.html - ruclips.net/video/tTOKcCyWnHE/видео.html
dude
Thanks Sir..!! 👍👍👍👍
You should have put a colored box to enclose the content to show how the margins are applied and the padding as well. Just pointing your mouse in the area and telling the viewers "this is x margin blah" is difficult to assess.
Crisp and clear
I've always learned that inline CSS Wasn't the way to go. Is there a reason you are using inline CSS?
I'm using embedded CSS in most of my tutorials because it keeps everything on the screen at the same time and makes it easier for people to see. Embedded is ok for temporary use and for testing.
Inline styles are when you use the style attribute inside an HTML element.
Neither of these things should ever be used in a production setting.
@@SteveGriffith-Prof3ssorSt3v3 thank you for the quick reply Steve. Have a good day
How do I change the margin/padding on only one element?
By targeting that one element with an id, a classname, or something like nth-child(1) or some other selector that identifies it as unique.
thank you so much great video
thank you so much for details
Amazing video
Aww! Awesome 💗 thanks Man