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 ❤
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.
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.
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; }
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
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?
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{ }
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
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...
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
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
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.
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; }
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.
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
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.
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.
I finally understood! Thanks a lot! That 'clock-wise rotation' words immediately cleared out my all confusions!
You're like the Bob Ross of Web Dev. Thank you for posting this.
You just made more sense in seven minutes than the last two hours of me studying in school. Thank you!
ikr
Same!!!
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 👏🏻
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 ❤
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
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.
Hats off to you
these 7 mins tells everything i want to know
amazing explanation, opened a locked door for me as a beginner. Thank you
Thank you so much steve, the way you explained was so simple and understandable!
Excellent video! short yet very coherent
You're great pal, great explanation, your very calmed voice made me put more attention, great video.
Such a good explanation , it really helped me as visual learner.
wow you shoud a teacher the way u explain things very smooth
I am a full-time professor. :)
@@SteveGriffith-Prof3ssorSt3v3 lucky students
Thanks. I"ve just begun and it helped me to adjust text in a list in a centre of the background picture!
you deserve more mate, it was the best lecture i have ever had in my life, hitting sub
Really appreciate this lecture, you are the best👍😃
Your voice is so calming
Now i an actually understanding css coz of you... Hope to complete whole playist thus week :)
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
Thank you, well explained with much calmness
Use larger numbers so that people can clearly see the change happening.
Best tutorial, totally clear 👌 Thanks!
i don't have left any confusion about padding and margin after watched this.
Best Tutorial Ever, thank you so much
Thank you, Steve! Short and to the point.
Best lecture I have ever seen👍👍
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!
Very enjoyed watching this video while learning a lot as well
Just started learning..its so useful..Thank you
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.
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 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.
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;
}
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.
Saving my life again and again... Thank you!
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
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 makes so much sense now 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
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.
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.
Best explanation ever...
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
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.
idc how old this video was. But it makes sense
Uncountable thanks! Extremely Helpful.
Really good Tutorial. it was awesome.
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;
}
Nice, very helpful and very easy to understand! Thank you very much!
you have amazing relaxing sound .
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.
Your voice is so brilliant.
damn he sounds just like tom hanks
great explanation, thank you so much! Makes way more sense now
2:08 correction
" 30 pixels "
Yes. Thanks. 40px would be the value if added. The actual will be 30px.
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
What IDE do you use? It's very minimalistic.
Brackets - ruclips.net/video/yblM56mx2MU/видео.html - ruclips.net/video/tTOKcCyWnHE/видео.html
This tutorial was dope!! Thank you
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.
Thanks for posting this.....It was very helpful... : )
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
Thank you so much! nice simple and well explained.
Very useful video. Thank you!
Excellent explanation. Thank you!
dude
crispy clear. thank you
Great work
thank you, sir. that was really helpful
great... understood clearly. thanks!
It is pretty clear. Thanks
Crisp and clear
Thanks a lot. Appreciate it much, Brother.
no quetions only RESPECT.
Thanks a lot
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.
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.
Awesome bro❤️❤️👍
wow i think i understand frontend now haha!!! Thanks!!!
appreciate your work!
At last I understood! tnx
whats the name of this coding progrsmme?
Brackets is the IDE that I used before switching to VSCode.
Thanks Sir it really helpful
very much appreciated..thank you for your enlightenment :D
Thanks! love your voice
really helped me a lot
I actually fucking love you thanks for the video mate
thank you so much for details
got a eloquent voice
Best video 👍👌
Great! Aptly put.
woooow u made me understand it now
Aww! Awesome 💗 thanks Man
thank you so much great video
Thanks Steve