How CSS Padding and Margin Works

[@shaikhshafeen]

I finally understood! Thanks a lot! That 'clock-wise rotation' words immediately cleared out my all confusions!

[@devondambrosio4978]

You just made more sense in seven minutes than the last two hours of me studying in school. Thank you!

[@septic7301]

ikr

[@tonyaanderson]

Same!!!

[@EdmundAlynJones]

You're like the Bob Ross of Web Dev. Thank you for posting this.

[@tonyaanderson]

This was the BEST explanation of margins and padding! THANK YOU!!

[@emmamachi7822]

i've watched countless tutorials on this only to feel more confused and losing the point. you have a talent for teaching. subscribed!

[@rahuls3838]

One of the best Tutorials out there! Thank you Steve for helping out millions of students across the globe.

[@adelowokehinde58]

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 👏🏻

[@ripcrypto5189]

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 ❤

[@Moarmmoforme]

Short, concise and to the point. Much obliged kind sir!

[@UriAlexandrovitz1]

Excellent video! short yet very coherent

[@khanayan-v7z]

Thank you so much steve, the way you explained was so simple and understandable!

[@MikixIT]

Best Tutorial Ever, thank you so much

[@shaoyangzhang7974]

Really appreciate this lecture, you are the best👍😃

[@shubhsagar6234]

Now i an actually understanding css coz of you... Hope to complete whole playist thus week :)

[@jiriorsag6184]

Best tutorial, totally clear 👌 Thanks!

[@OSmith301]

great explanation, thank you so much! Makes way more sense now

[@Nitroco0l]

Wow brother, thank you I was having trouble understanding margins and padding. I feel more at ease now.

[@chum2470]

Your voice is so calming

[@ElijahKabambala-jw8my]

Thank you, well explained with much calmness

[@MuhammadZubair-xw2pf]

Wow. Now i understand what is difference b/w them. Thanks

[@sarthak1317]

2:08 correction " 30 pixels "

[@SteveGriffith-Prof3ssorSt3v3]

Yes. Thanks. 40px would be the value if added. The actual will be 30px.

[@newworld4252]

Woww oh my God.i got the whole of it in minutes.. Thank you bro

[@nagavenkateshkolapalli4547]

Best lecture I have ever seen👍👍

[@Iamgayathrinagarajan]

Just started learning..its so useful..Thank you

[@haoql.7686]

Very enjoyed watching this video while learning a lot as well

[@tabrezpathan1588]

Love the way you teach. It’s like a master class. Thank you for this. Ricky Bubbles Julian Randy! TPB is the best!

[@espritcontemplatif7965]

Uncountable thanks! Extremely Helpful.

[@ogicacristian4799]

Nice, very helpful and very easy to understand! Thank you very much!

[@legitsports4808]

Use larger numbers so that people can clearly see the change happening.

[@hussein394]

your sound prefect

[@websurferwizard]

Hey steve, do you have a tutorial on how to set up Brackets? Just like you have it. I'm confused.

[@SteveGriffith-Prof3ssorSt3v3]

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 - kzbin.info/www/bejne/fKm1c52dicyomtk I did make this video about Brackets back in 2017 - kzbin.info/www/bejne/r5PPfmhsot1lg7c

[@freemancity2518]

Such a good explanation , it really helped me as visual learner.

[@Hieucd97]

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?

[@SteveGriffith-Prof3ssorSt3v3]

Negative padding doesn't work but negative margins will pull the box in different directions.

[@Hieucd97]

@@SteveGriffith-Prof3ssorSt3v3 Thank you! I'm new to HTML and was confused with margins and padding when I put in negative values

[@hiroimitsuna7301]

appreciate your work!

[@9664291156]

thank you sir for this video

[@away6545]

idc how old this video was. But it makes sense

[@sunilchannelvlog3743]

you deserve more mate, it was the best lecture i have ever had in my life, hitting sub

[@lamokcm209]

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

[@joemcdonough2510]

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.

[@joemcdonough2510]

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]

@@joemcdonough2510 margins always have a transparent background. Padding shows the background colour of the element.

[@joemcdonough2510]

@@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.

[@joemcdonough2510]

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.

[@SteveGriffith-Prof3ssorSt3v3]

@@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; }

[@kosaygobran]

woooow u made me understand it now

[@sameerisonvacation]

Aww! Awesome 💗 thanks Man

[@aneunjieroine3169]

Thanks Sir it really helpful

[@minercreepmc]

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

[@SteveGriffith-Prof3ssorSt3v3]

Top and bottom margins collapse. They overlap and the larger value is used.

[@krishnamohanyerrabilli4040]

thanks for that dev

[@deiraraj4547]

Thanks for posting this.....It was very helpful... : )

[@TheDQR]

You're great pal, great explanation, your very calmed voice made me put more attention, great video.

[@zakhariihusar6975]

Thanks. I"ve just begun and it helped me to adjust text in a list in a centre of the background picture!

[@anthony.boyington]

Thank you so much! nice simple and well explained.

[@TonyYakovenko]

Thank you, Steve! Short and to the point.

[@benzflynn]

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.

[@SteveGriffith-Prof3ssorSt3v3]

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 - kzbin.info/www/bejne/gavChGeEoJmkr6s and another about the Cascade where I talk about inheritance - kzbin.info/www/bejne/hprKqYKvi6l8h8k

[@damo190]

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.

[@SteveGriffith-Prof3ssorSt3v3]

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.

[@damo190]

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.

[@SteveGriffith-Prof3ssorSt3v3]

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; }

[@YOUTUBE_IS_WOKE]

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.

[@ranaasad5076]

Hats off to you these 7 mins tells everything i want to know

[@hafsahmr9010]

Thank you so much!

[@My-video123]

At last I understood! tnx

[@janaschelle8377]

Saving my life again and again... Thank you!

[@mathmatikapret5712]

Thank you very much bro

[@smailsafire9593]

This is the best explanation in the internet for margin and padding, thank you Steve for the lesson.

[@bljelena90]

This makes so much sense now thank you.

[@Mammad12J]

Really good Tutorial. it was awesome.

[@salehalnahdy8771]

very much appreciated..thank you for your enlightenment :D

[@nichoalaz6235]

Hey thanks man! as someone whos only recently started learning HTML and CSS this video was really helpful.

[@DSureshKumar]

Your voice is so brilliant.

[@salehalnahdy8771]

damn he sounds just like tom hanks

[@DSureshKumar]

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.

[@davidmp170]

Thanks a lot!

[@argenisaguilar9045]

Thanks so much

[@abdullahamer9282]

how can we move a text toward center left .I tried but didnt get it

[@SteveGriffith-Prof3ssorSt3v3]

kzbin.info/www/bejne/fH6vm2Bmq6yGqas kzbin.info/www/bejne/qX2kpqF_jZqFjtk These should help.

[@shankarbaddi4424]

Best explanation ever...

[@harshalsurwase2185]

i don't have left any confusion about padding and margin after watched this.

[@sugabts3293]

wow you shoud a teacher the way u explain things very smooth

[@SteveGriffith-Prof3ssorSt3v3]

I am a full-time professor. :)

[@sugabts3293]

@@SteveGriffith-Prof3ssorSt3v3 lucky students

[@SkeezerMui]

This tutorial was dope!! Thank you

[@fahadibrahim7268]

amazing explanation, opened a locked door for me as a beginner. Thank you

[@soulofsong7518]

you have amazing relaxing sound .

[@soulofsong7518]

thank you so much great video

[@ahmedkafass9793]

Thanks a lot 💚

[@MobilTemp]

Great work

[@ahmedel-hindawi9226]

love your accent

[@ycombinator765]

Awesome bro❤️❤️👍

[@midkort]

Excellent explanation. Thank you!

[@itchyaminoacid7251]

crispy clear. thank you

[@markzait2750]

Very useful video. Thank you!

[@ek5248]

It is pretty clear. Thanks

[@madhumad1397]

great... understood clearly. thanks!

[@tanvirh7707]

thank you, sir. that was really helpful

[@thamodaran6998]

Crisp and clear

[@ridoanuddin3378]

Thanks a lot. Appreciate it much, Brother.

[@vivekhiremath1842]

really helped me a lot

[@elgunmhrrmov7672]

thank you so much for details

[@weareeternal3230]

Thanks! love your voice

[@ersaix0180]

no quetions only RESPECT. Thanks a lot

[@master-ik9ro]

wow i think i understand frontend now haha!!! Thanks!!!

[@elixr8602]

Thanks Steve

[@leonardmbibi8013]

Great! Aptly put.

[@IndianGaming0208]

Best video 👍👌

[@dilshankumarage6462]

Thank you 👏

[@boisauce1131]

5:45 bars my dude

[@saheedabdulsobur5981]

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

[@SteveGriffith-Prof3ssorSt3v3]

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{ }

[@saheedabdulsobur5981]

@@SteveGriffith-Prof3ssorSt3v3 thanks so much steve

[@armyteguh2649]

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...

[@SteveGriffith-Prof3ssorSt3v3]

You can use any unit you want.

[@devohnmitchell]

Thanks Sir..!! 👍👍👍👍