Margin and Padding Deep Dive: The basics

[@pelosuelto70]

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!

[@KevinPowell]

Welcome aboard!

[@Anon-te2bz]

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!

[@KevinPowell]

You summed it up the entire video in a couple of sentences. I think I could have made this shorter, lol.

[@hackzgamezyt]

Someone's taking notes!

[@mdchowdhury3874]

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.

[@closetgrasshopper2627]

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

[@KevinPowell]

You're very welcome Closet Grasshopper! Really glad that you like the video and how I present my stuff :)

[@rootuser5652]

@shashanka Mg pretty sure she was referring to the “computer science nerd” as the one with no social skills.

[@wholeness]

Just for the observer, you never actually answered the question when to use one versus the other. Great tutorial though.

[@KevinPowell]

It's not always so simple, but I like to look at it as padding for more background, margin for extra space.

[@abdulrehman5159]

Now I understood completely! Thanks for the detailed video on the topic.

[@pratikbhandari6679]

On the thumbnail I think its "basics" not "bascis" 🤣🤣🤣

[@NeroIvanY]

Thanks for your work, Kevin. Very clear explanation. Looking forward to the third video! very interested in your thoughts about real life cases!

[@KevinPowell]

Thanks Ivan, glad you liked it. And that video will be out Friday, so not too long to wait 👍

[@MesutAkcan]

the very BASCiS !!! ???

[@adarshsoni5323]

Hi Kevin please make video series on JavaScript from beginners to expert level .....please

[@KevinPowell]

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.

[@RamonMartinez-jz9uv]

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.

[@KevinPowell]

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/

[@NeoKarthik]

I finally get he margin: auto statement. Thank you so much!

[@acidhauss7018]

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

[@tbgan6675]

Thumbs up for every series. Helping many of us especially those who just beginner

[@KevinPowell]

Thanks a lot, and I'm happy to help 😁

[@sbtoolman12123]

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

[@Hannibalism]

Ah, finally someone that gives it loud and clear with no confusing metaphors.

[@ginasta7575]

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)

[@sebastiandelima7385]

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.

[@moritz584]

great vid!

[@chma0]

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

[@niraj2216]

Beautifully Explained. Thank You.

[@adhityapoernama940]

A very straight and clear explanation video! thank you!

[@KevinPowell]

Thanks, glad that you liked it!

[@william3588]

Margin does not affect element width, its just border and padding, no?

[@Tesla-Live____]

thanks the tutorial was so helpful

[@lifeofdidrik]

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?

[@vanessakimana3929]

Thanks Kevin for clarifying this 👏🏽

[@rio2572]

thought this was about stocks.. i was eating then was sooooo confused when he started coding lmao oops wrong video

[@amitpandhare2663]

my mam used to say, "never trust a man who does a spelling mistake in a thumbnail"

[@sknEK_code_chef]

very helpful. but the image is "the very bascis" :)

[@drummerdev5522]

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

[@KevinPowell]

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.

[@TheDJDannyJ]

it works very, exactly, much the same... hahahah, oookay.

[@JonFuller1004]

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

[@KevinPowell]

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.

[@amirani836]

your video's, maks me feel, that I have progess

[@sheeshee6351]

The thumbnail says Bascis. Is it intentional or no one noticed in 3 years ?

[@jashanpreet880]

welll done sir i was struggling with this property

[@omphemetsemafoko830]

Thank you for the clear explanation.

[@PswACC]

Your thumnail for this video has a Typo

[@kevincrum2375]

ive been curious about how gap also fits into this

[@abouhashim100]

first time to know the difference... thanks

[@tanushs08]

10:50 margin top : auto = 0 margin bottom : auto = 0

[@robertrydlewski9538]

Kevin ... Your the best, period. Thanks a lot

[@driziiD]

damn, i wanmted you to explain border

[@psyrotix2463]

"Deep Dive: The Basics" LOL

[@KevinPowell]

Gotta start somewhere with the deep dive 😁

[@psyrotix2463]

No I was just laughing at the oxymoron, great video though!

[@_ata_3]

Thank you. Do you recommend using background or background-color when setting a colored background?

[@cow240]

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?

[@arvindk4813]

I was looking for this , yeah this is it thank you.

[@space_monkey125]

Hi kevin, thanks for the awesome videos. It helps me alot. :)

[@KevinPowell]

Glad to hear that Ameen!

[@tochiojukwu2614]

So i can use margin to change the position right?

[@namekomuna1129]

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.

[@everlastproducciones9280]

Thanks for your time

[@SM-ok3sz]

Your title card is misspelled

[@JLDReactions]

Great explanation.

[@webb-developer]

perfectly explained ✅

[@BishalDas-xu4zi]

A thanks from an Indian ❤️

[@maran.ath4]

he literally took oversimplification to another level, I wish all my teachers were like you🥲thanks a bunchhh

[@iboro-kun84]

No, thank you, Mr Powell. You're awesome, not a little bit.🤝

[@anyzzas7149]

Thanks for the good tutorial.

[@learntocode1878]

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

[@eileenmfox4266]

I don't see a link to the codepen.

[@muratg9395]

Thank you Kevin.

[@AmanSharma-bv4ii]

thank you uncle 🙏🏼

[@krishnamohanyerrabilli4040]

Thanks for that Sir.

[@damion5874]

Thanks for the teaching. Looks like the thumb nail for this video has a misspelling.

[@ninjaaljun7674]

.

[@network_noob]

[@pauljohn3898]

Feel lucky to know you from the very beginning I learn CSS

[@elhamzeinodini4828]

💥🌹

[@BUDX]

Thank you very much for explaining this. I was really struggling with this but now it's all clear.

[@tristanmckellen9972]

thank you so much!

[@dhanushsivajaya1356]

Thankyou sir

[@ericdy2118]

thanks so much!

[@gaetanoalessandro286]

Hi, thanks a lot for sharing your knowledge: you 're helping me!! :-)

[@ingridhernandez2782]

I appreciate your videos so much. Thank you

[@yadusolparterre]

Excellent tutorial, there are so many tutos here but this one goes deeper and I finally got it after many years of confusion

[@olenasid8]

Thank you!

[@alvarocarrilho]

Thks From Lisbon - Portugal

[@justaguywholikeshentai9019]

KING OF CSS!

[@dynamic-homepages]

Thanks =)

[@ycombinator765]

B A S C I S

[@shivarammuthukumaraswamy7164]

loved the explanation..tysm buddy..

[@Brospeh00]

Very informative, thanks Kevin!

[@rahuldora1587]

Awesome explanation love It ❤️

[@marcusmorrow3900]

Good stuff. Well explained

[@mohammadakramsheik1657]

Best video, thank u very much

[@karolinalencina7121]

thank you so much!!!

[@calvinebun-amu5397]

Great video, Kevin.

[@mahdi3521]

man can't thank u enough legend

[@benjirification]

I just loved this series and the way you explained it easily.Looking forward to watch next :)

[@KevinPowell]

Thanks Benjir, glad you liked it :)

[@js_programmer8423]

so padding is basically height & width in an alternative way

[@KevinPowell]

A more dynamic way, yes :) - will adjust to your content, which is nice.

[@KradianKrad]

Best explanation!

[@brogen100]

mind blown! I nominate you teacher of the year

[@KevinPowell]

Thanks so much 😊

[@bloc-notes6751]

You are the best !

[@paketa7736]

You are a great teacher. Thank you, teacher!

[@baljeetgulati4605]

hats off to u sir!

[@shrookwageh5976]

what to say. you're so awesome

[@vampirekabir]

man!you explain like a bosss!!

[@KevinPowell]

Thanks! Super glad you liked it!

[@willl0014]

Black deep!!

[@happyhuman8549]

pls make a video about borders!!

[@KevinPowell]

What do you want to know about borders? I generally don't do much with them, so I'm curious :)

[@seemsas]

Thank you

[@khilapsingh2838]

Thank you very much Kevin!!!!!!

[@KevinPowell]

No problem!

[@TheCrusaderRabbits]

It is good.

[@KevinPowell]

Thanks, glad you liked it :D