How CSS Padding and Margin Works

This video covers everything you need to know about how CSS padding and margins work and how they can be written in your CSS stylesheets.
Code GIST: gist.github.co...

[@EdmundAlynJones]

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

[@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!!!

[@shaikhshafeen]

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

[@rahuls3838]

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

[@tonyaanderson]

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

[@sarthak1317]

2:08 correction " 30 pixels "

[@SteveGriffith-Prof3ssorSt3v3]

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

[@MikixIT]

Best Tutorial Ever, thank you so much

[@emmamachi7822]

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

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

[@shaoyangzhang7974]

Really appreciate this lecture, you are the best👍😃

[@freemancity2518]

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

[@tabrezpathan1588]

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

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

[@khanayan-v7z]

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

[@soulofsong7518]

you have amazing relaxing sound .

[@jiriorsag6184]

Best tutorial, totally clear 👌 Thanks!

[@smailsafire9593]

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

[@UriAlexandrovitz1]

Excellent video! short yet very coherent

[@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 ❤

[@nichoalaz6235]

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

[@MobilTemp]

Great work

[@shubhsagar6234]

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

[@karamhassan6884]

Anyone agree that Steve's voice should be part of siri /google assistant?

[@Moarmmoforme]

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

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

[@deiraraj4547]

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

[@espritcontemplatif7965]

Uncountable thanks! Extremely Helpful.

[@Iamgayathrinagarajan]

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

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

[@MuhammadZubair-xw2pf]

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

[@RedBaron19180]

I actually fucking love you thanks for the video mate

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

[@ridoanuddin3378]

Thanks a lot. Appreciate it much, Brother.

[@ersaix0180]

no quetions only RESPECT. Thanks a lot

[@lordphoenix5827]

Really good Tutorial. it was awesome.

[@fahadibrahim7268]

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

[@newworld4252]

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

[@markzait2750]

Very useful video. Thank you!

[@madhumad1397]

great... understood clearly. thanks!

[@master-ik9ro]

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

[@haoql.7686]

Very enjoyed watching this video while learning a lot as well

[@bljelena90]

This makes so much sense now thank you.

[@samirarfaoui8702]

dude

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

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

[@tanvirh7707]

thank you, sir. that was really helpful

[@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..!! 👍👍👍👍

[@elgunmhrrmov7672]

thank you so much for details

[@notsphinxz]

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.

[@SteveGriffith-Prof3ssorSt3v3]

I don't understand your question.

[@mathmatikapret5712]

Thank you very much bro

[@away6545]

idc how old this video was. But it makes sense

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

[@soulofsong7518]

thank you so much great video

[@weareeternal3230]

Thanks! love your voice

[@ek5248]

It is pretty clear. Thanks

[@aneunjieroine3169]

Thanks Sir it really helpful

[@topeakanji4942]

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

[@SteveGriffith-Prof3ssorSt3v3]

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.

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

[@spagetti2514]

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

[@SteveGriffith-Prof3ssorSt3v3]

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

[@sameerisonvacation]

Aww! Awesome 💗 thanks Man

[@9664291156]

thank you sir for this video

[@shankarbaddi4424]

Best explanation ever...

[@kosaygobran]

woooow u made me understand it now

[@chum2470]

Your voice is so calming

[@My-video123]

At last I understood! tnx

[@hiroimitsuna7301]

appreciate your work!

[@devT44]

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?

[@SteveGriffith-Prof3ssorSt3v3]

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 - kzbin.info/www/bejne/i3O6nWZth9dslcU

[@devT44]

@@SteveGriffith-Prof3ssorSt3v3 thank you.

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

[@grounds585]

got a eloquent voice

[@krishnamohanyerrabilli4040]

thanks for that dev

[@bigwilly4497]

thank you so much!

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

[@hafsahmr9010]

Thank you so much!

[@leonardmbibi8013]

Great! Aptly put.

[@vivekhiremath1842]

really helped me a lot

[@dr.simonius609]

Perfect thanks

[@ycombinator765]

Awesome bro❤️❤️👍

[@akshatlahkar]

Thank you sir

[@thamodaran6998]

Crisp and clear

[@ahmedel-hindawi9226]

love your accent

[@ryanakers3678]

God bless you

[@salehalnahdy8771]

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

[@boisauce1131]

5:45 bars my dude

[@zakhariihusar6975]

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

[@argenisaguilar9045]

Thanks so much

[@rohitram5692]

THANK YOU BRO

[@IndianGaming0208]

Best video 👍👌

[@elixr8602]

Thanks Steve

[@ahmedkafass9793]

Thanks a lot 💚

[@dilshankumarage6462]

Thank you 👏

[@TheDQR]

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

[@davidmp170]

Thanks a lot!

[@anAwesomeNameHere]

Thanks a lot

[@aguycreates1900]

Thanks sir!

[@harshalsurwase2185]

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

[@aramkhoshnaw2291]

thanks

[@devil-rg6fs]

Thanks

[@nameless7158]

whats the name of this coding progrsmme?

[@SteveGriffith-Prof3ssorSt3v3]

Brackets is the IDE that I used before switching to VSCode.