Collapsing margins - what they are and how to deal with them

[@KevinPowell]

What other things about CSS drive you nuts?

[@holigan5392]

Try sass

[@KevinPowell]

I love Sass :)

[@Rafiozoo]

z-index may become quite funny ;)

[@hopeofglory8108]

That `margin: auto` doesn't work to centre a child vertically when it is in a regular block element with some kind of height!

[@A_Lesser_Man]

sizing things properly, only to have them break later! omg. smh. something works perfectly for months. then, make a change that seems unrelated, and bang, layout dorked. or...where in the love of pizza did that button get to? then you realize. and face-palm.

[@timbittins]

That problem is outrageous! It not only collapses my margin but also my cardiovascular system. This Mr Powell is truly a gentleman, who offers an amazing solution with the Flow-Root. Splendid, sir! Splendid indeed.

[@piromaniaco3579]

Dealing with exactly this "infurating" issue at this right moment and KZbin notifies me Kevin has a new video, reason enough to stop any work at hand and hit Kevin's lesson to get, magically, not only the answer but a whole deep lesson about it. Thank you Kevin, one more time, for your incredible work.

[@shivamchandra.0654]

I as a beginner to frontend development am really so so thankful for your great content and for free . Please keep making these videos these are very helpful. Definitely these skills has took you years to develop and you are sharing so much with us . Love and respect from India sir.♥

[@MrBrax]

The most infuriating thing in css is trying to remember which one of the two position arguments in margin is X/Y

[@mohamedyamani8502]

A rule of thumb that I found helpful is to think of the shorthand is that it is clockwise (thus: top, right, bottom, left). Now for the X/Y things are easier, the first value is the opposite direction of the first shorthand (bear with me xD), the first value (X) is top and bottom while the second value (Y) is right and left, hope I wasn't too crazy about it.

[@baphometgaming1056]

@@mohamedyamani8502 No, i think MrBrax is too crazy about it. It's so easy to remember lol, margin: 10px 20px top-bottom left-right and margin: 1px 2px 3px 4px top right bottom left.

[@MrBrax]

@@baphometgaming1056 I've used css for about 16 years, can never remember it 😟

[@DietChugg]

Agreed MxBrax. I wish browsers and code had intelligence reminders about it when you go to use and edit those values. Even if it's not hard to remember... It's another thing you now have to remember to the large list of things you need to remember. The less of those the better in my opinion.

[@reginaserrambana4335]

I just try to remember/associate it with *left to right, then down* a line... like you read a page in English and a few (not all) other languages. X is left to right, and Y is down... following their natural alphabet order (again, primarily for English)

[@guillermoandradaFSD]

Did I mention that you are SO good? Man, thanks... That's why I recommend your channel everytime I can... Thank you thank you thank you...

[@KevinPowell]

Super glad that you like my content, and thanks for sharing it!

[@baphometgaming1056]

@@KevinPowell Honestly, who doesn't like your content. We learn SO MUCH but then there's so much to learn we learn almost nothing after all :D.

[@quangtoanta8577]

Yes it's really frustrating and i didn't know why ??? I have spent all night figuring it out by myself . The result is that now I'm watching you ... Fortunately, you're here and thank you so much

[@hashkeeper]

even more respect for a team that tracks and talks openly about their mistakes though. really gotta hand it to them.

[@chaimrochlitz8523]

Omg!! Just yesterday I had a full on blowout about this very exact thing, where I swore that I’m never touching CSS again ever, and then this video pops up in my notifications.... Man, you’re a lifesaver, thanks you so so much!! 🙏🙏❤️❤️

[@kevinwagner5023]

wow, I have been writing css for 10 years and did not realize display: flow-root existed. great video!

[@Manas-co8wl]

I was watching your "The secret to mastering CSS layouts" vid and came across this phenomenon. This explains a lot of things, except for why it's there in the first place.

[@iamvictorlennon]

Holy sh1t... Explanation and solutions are so elegant. Nice to meet you here, Kevin.

[@am53n8]

Floats and padding/margin have been the worst thing about css for me. I'm glad we don't use floats as much, and videos like this help me a lot with my padding/margin issues. I also like the practical use for the lobotomised owl

[@guestofallah7661]

This man is humble and passionate I like what u do , God bless u

[@jasonleelawlight]

Now I have a better understanding of border collapsing! Over the years I have developed a practical methodology of using paddings whenever possible and only using margins when it's absolutely necessary, it worked for me pretty well in general.

[@AbhinavKulshreshtha]

Aaha.. The good old lobotomized owl selector comes to rescue again. I have beem using it for few years since Heydon Pickering's presentation. Never understood collapsing margin before you explained it today. Amazing content as usual css sensi

[@creativereasons7588]

Watching one of your videos before I start my day (usually when no class of 'active' is applied to the brain :P) really helps focus up and get ready for the day but in a much more exciting way than reading the email list or the first scrum meeting, regardless of the educational topic (which is also gold) the format and passion of the message just helps kickstart the mind in the right direction :) many thanks Kevin!

[@xorlop]

Omg I watched this like a week ago and now running into this! So glad you made a video on this bc somehow I have never run into this issue until now!

[@daleryanaldover6545]

The solution is simple, never have sibling elements with both margins pointing to each other. Either have all elements have margin bottom or margin top, same goes with margin-x (left and right). All the unintended features of css are the reason why I opt to reset styles for almost all of my projects. Now talk about positioning elements. Elements with relative position and negative margin while next sibling is block element. The result is astonishing, the 2nd element stacks on top of the relative positioned sibling. Kinda hard to explain here maybe I'll pull some demo tomorrow and link it here.

[@manhalrahman5785]

Woah thanks for that solution! It so obvious yet it didn't click. I was freaking blowing up everything and I am a beginner in web development. I was just reconsidering my life goals lol

[@pearlboy]

Sir.. you cleared mystery I was wondering for a decade.

[@shaunpatrick8345]

I've never agreed with anything more than I've agreed with those CSS Working Group mistakes "border-radius should have been corner-radius" Hell yeah!

[@KevinPowell]

haha, yeah. It's nice that they're able to realize they make some mistakes along the way :)

[@xstrafez_c2017]

I've been "reseting" my margins like you show towards the end since I started to learn css seriously. Thank you so much for the recap, it's good to have things fresh in mind :p

[@hugodsa89]

Honestly the very best CSS content, period.

[@hugodsa89]

Kevin, could you please do a CSS master course. And I mean like something that you go zero to hero. And that would also have production considerations to have, guidelines, tips for naming conventions, normalisation, resets, utility css classes, mixins etc... Basically the whole thing. Put a high price on it that’s worth your time. I sincerely would purchase it in a blink of an eye. Frankly tired of stack overflow css that covers a certain use case but then it’s not been updated forever, and CSS is just one of those things that has so many quirks and specific weird behaviours that’s so frustrating most of the time. Also, just for the sake of having a wider range of buyers, I’d appreciate if you’d not make it in Sass. Would be just unusable to me unfortunately :(. I have been working a lot with CSS-In-JS as of late. Thanks for even hearing my plea ❤️

[@ibadshaikh2215]

The way you accept css is just awesome 😂👍

[@technikhil314]

All these years I was wondering whats the exact use case of flow-root. Thanks a ton kevin. Your content is awesome as always. Just playing around with your code pen and I realized the margin between flex-containers do collapse but not between flex-containers and flex-item or between multiple flex-items cause flex-item create new formatting context but not flex-container thats one more thing I learnt.

[@jradplowman]

Best thumbnail ever!!!!

[@judonomi]

This is such a great video. I have a lesson with my students where I show them weird behaviors with padding and margin and I never knew about the "display: flow-root fix". Thanks a lot!

[@sheriffderek]

I always knew what collapsing margins were, but I've also always used a reset. They are a nice default if you're using the default browser styles (and have no access to CSS), but otherwise, _just skip it_ and you'll never run into any situations where you ever have to think about them again.

[@mrshnp]

I just love how quirky css is, its so beautiful when you understand it!

[@susmitislam1910]

Exactly! When you're just starting out almost every other step becomes frustrating and nothing makes any sense but eventually with practice things just become so much clearer (I still get frustrated sometimes, but much less frequently than when I was just starting out).

[@mrshnp]

@@susmitislam1910 I completely agree with you kind sir

[@DietChugg]

@@susmitislam1910 This to me says we need to find a way to make it more clear for beginners.

[@jkovert]

Yes, it's gloriously unscientific.

[@MASTERRAGE]

That thumbnail XD

[@alvaro.makes.music1]

he's truly infuriated!

[@bnodtwari]

maintaining responsive grid layout along with all the billions of things in screen is headache sometimes but once I get rid of it, everything becomes clear. One never be an expert, one be a better user.

[@patrickc.6183]

Great video Kevin! I recently had a margin-collapse issue on a React app and used flexbox (grid also works) with flex-direction: column on the parent element to prevent this problem.

[@josvelema2362]

I can't recall if i ever ran into this issue but im saving this video , thnx! Nice use of the drunk owl selector btw 😆

[@emperoroftheearth3215]

There is another solution you didnot mentioned its = overflow:hidden.. its my favourite way of solving this issue.

[@somnvm37]

me: backg (tab) sublime: backgorund vscode: background attachment me: backgi sublime: background image vscode: backgroundi me: col sublime: color vscode: col

[@SivakD]

To be honest, I like the general concept of this, but I like going from top to bottom most of the time and I tend to use tag > :not(:last-child) most of the time and apply whatever margins. I do dig the CSS variable suggestion, though. I also tend not to think about the flow-root, but it's definitely something to keep in mind.

[@maneeshrockx667]

Now this have been a huge problem to me..Thanks to you for solving my problem and by the way your thumbnail is dope😁

[@jontrillana3989]

oh, yeah... i forgot all about the 'owl selector'... great post!

[@diwakardayal954]

Op thumbnail 11/10 😂 Keep it up

[@KevinPowell]

Thanks 😅

[@oluwadamilarechukwudi9465]

Seriouly sir, your thumbnail pix looks so funny 🤣. It's what brought me to this video.

[@idontknowwhatimdoing8941]

The most infuriating thing about CSS is most people underestimated it in the beginning and think it is easy to learn, but once they go beyond color, font-family and background color, shits gets real.

[@juliosoto9471]

so the people is what infuriates you or the CSS?

[@idontknowwhatimdoing8941]

@@juliosoto9471 Both.

[@carolmckay5152]

I don't use the flow class, this is in my browser resets css: // margins * { margin-top: 0; margin-block-start: 0; } * + :last-child { margin-bottom: 0; margin-block-end: 0; } This makes use of the default bottom margins and I find it to work well.

[@aCitizenJOSerased]

Another masterclass by the grand master. 🔝 Thank you so very much for your explanations and solutions.

[@sulemanmughal5397]

You are a legend sir 🙏

[@riadkhan9798]

you are a life saviour it was making me crazzy

[@cezargheorghiu2606]

Another great tutorial! Thank you!

[@jaydenmoon1165]

Your videos are amazingly informative and very helpful - thank you :D

[@deamorta6117]

wtf, caught me off guard my problem was exactly the first thing you said hahaha

[@Lil_Puppy]

Yes, collapsible margins were a big mistake. The first thing I do is redefine all base margins/paddings, and other defaults to zero so I don't have this problem, wish I didn't have to but here we are. If the CSSWG just removed collapsible margins from css, it would take all of 10 minutes for developers all over the world to fix their sites, it's a negligible affect globally. I would be so bold as to say that inheritance is the second mistake. It works ok in programming languages, but in design it is a hindrance, that's my job, I don't want someone thinking the developers of css knew what was best for the designs we have to make. I want to style everything and we usually end up doing exactly that while working around inheritance and the other inconsistencies with hacky workarounds. I hate having to zero out defaults because they're wrong or in the way inconsistently. But after a decade, I'm happy that we can finally use css3 without caring about edge/IE and their proprietary hacks.

[@PaulMcCannWebBuilder]

Lobotomized Owl!! Who says CSS isn't fun? Just being able to say those two words together is fun.

[@jenstornell]

I think position: sticky with tables may be my most annoying problem. That's mainly because that there is an issue when using overflow: hidden on a parent.

[@hubertlenningrad2252]

This is why I always code everything in binary.

[@p_o_z_e]

Well this is convenient, i got stuck with this scenario today haha, thx for the video!

[@ashkanahmadi]

Excellent info as usual. Thanks. Could you do some advanced topics as well like SCSS functions

[@weshuiz1325]

"The most INFURIATING thing about CSS and how to deal with it!" is it true? *a tutorial about how to make css work with internet explorer*

[@KevinPowell]

hah, yeah. It shouldn't be something too many people need to worry about still, though I realize in some places it's still a thing.

[@weshuiz1325]

@@KevinPowell dw microsoft will drop ie support in aug

[@IAmLesleh]

@@weshuiz1325 for their own services like Microsoft 365, but they’ll still be supporting it for the foreseeable future.

[@eddymison3527]

there is no way hahaha...

[@IAmLesleh]

@@eddymison3527 Internet Explorer has an expiry date now. June 15th 2022.

[@sihemtoutsimplement6616]

Great video ,thank you !!!!

[@AutsajderRR]

before display: flow-root, overflow: auto was used ;)

[@CharlesSmall]

Thank you Kevin

[@MaxWeir]

I’m running into a similar issue, I have a forms which have the buttons wrapped in their own div, it could contain single or multiple buttons or plain text, I’m trying to space these out but also space them vertically on mobile. It’s been very tricky as the button text could be short or long so the wrapping is not always going to be consistent and the vertical space is set as a max-width breakpoint which is a bit hacky I feel.

[@thegreatbambino3358]

3:55 Jen psaki starts taking notes...

[@theshredguitarist25]

“That’s just crazy sauce!”

[@_fRiction_]

The thumbnail reminds me of Megamind 😅 Good stuff though ❤️

[@JohnBortins]

Outstanding!

[@schattenbrot7013]

Good morning! I see you using a lot. Could you clarify when I should use , or ?

[@donaldabanoub6382]

I've always used overflow: hidden; to solve this

[@KevinPowell]

That's actually similar to `display: flow-root` in that it's creating a new formatting context. They realized people were doing other things... another popular one is `columns: 1`... so they gave us something that did NOTHING else except making that new formatting context.

[@polthm]

Thanks for the nice tricks !

[@eotikurac]

i'm confused. is this a list issue? if i have normalize.css would ther still be an issue with margins? not sure what i'm fixing. if i have lists i make margin-bottom: -1rem on the ul and margin-bottom: 1rem for li. that way i cancel the margin on the last item + the ul margin but i don't know if this video was about this or not.

[@nro337]

Thank you!

[@mverma7845]

why can't we just zero out the margin and padding with * { margin: 0; padding: 0; } would that still cause the same issue with collapsing margins?

[@pulok9909]

Really great!

[@AndersJytzler]

I sometimes use the CSS editor in the "Customize" section of WordPress. Is this bad form? I could imagine it would take longer to load than eg. from a custom.css file. Any comments/knowledge on this?

[@theshredguitarist25]

What is the difference between margin: auto; and margin: 0 auto;???

[@initiallytk]

Has anyone proposed a "margin-collapse: none" type thing in any spec so we could eventually someday just disable that without weird workarounds?

[@2SaltyRecipes]

I have a question, hopefully someone can help me. I have a logo image that I want to move it on the bottom right corner when it comes to a certain screen size. So using media queries right? I use @media screen and (max-width: 499px) { .logo { position: fixed; bottom: 0; right: 0; width: 300px; } that goes in CSS, but it puts my image on the TOP RIGHT corner instead of the BOTTOM one and I don't know what to do. I played with top/left/top/right etc nothing works.

[@justingiovanetti]

Anyone else ever notice that elements that are larger than the viewport, that are direct children of the body, that are positioned absolute, will cause the body to scroll? The body seems to behave differently in that regard compared to any other container type.

[@avneet12284]

An amazing video

[@kinstar]

6:50 i swear ive asked myself this question so many times on my own styles xD

[@Xmetalfanx]

yeah i have had a "WHAT THE HECK HAS IT DONE THAT FOR!? >:| " CSS moments but i still love CSS lol

[@27sosite73]

thnak you

[@priyankpravinchandra9625]

I see dislikes for such videos. Who are these creatures? Where do they come from? Why do they even exist?

[@jaceborg]

Must be just me but 'flow-root' seems like a much simpler/better solution with the 'ideal' solution seemingly overly complex. I mean who uses '> * + *' regularly enough to have a clue what it does 6 months from now.

[@Victor_Marius]

The red from 10:42 is not really red. Why?

[@jenstornell]

I almost always use gap instead of margin these days. It works in most cases.

[@KevinPowell]

Issue is with flex, it's not supported in Safari yet :(

[@terry-]

Great!

[@snigdh]

I wonder if :not(:first-child) would work same as * + * 🙄

[@ELStalky]

That is exactly what i usually use, it seems semantically more intuitive than the "lobotomized owl".

[@matiaslauriti]

this does not happens to me because I use Tailwind CSS or Bootstrap or any similar so it uses Reset and Normalize, done...

[@ינוןאלבז-כ1ז]

Thanks!!!!!

[@kumarvadivel4328]

hey kevin can you put video for responsive font sizes

[@KevinPowell]

I have a few already. Look for my video on min() max() and clamp(), probably the best one

[@AdarshSingh-qd6mq]

How do someone get CODEPEN tshirt ??

[@Syntarex]

Is normalize.css setting flow-root to elements? It should. :/

[@frontend3409]

Not a single word about those hr's which are used between containers which fixes the issue. Why?

[@sharakpl]

Why would you even bother with margin-top? Only thing it's good for is in flex/grid with value "auto". For other cases where you need space between blocks use margin-bottom ONLY. Bootstrap 4 ditched margin-top to avoid this problem and it was years ago.

[@KevinPowell]

I actually use margin-top more than bottom these days. Big mindset shift for me, as I used to 100% be the other way around. Either way works fine as long as you're consistent :)

[@sharakpl]

@@KevinPowell I see why this can be confusing. I've always thought browser default margin for paragraphs and headings is set for bottom only and the top is 0. I am shocked it's actually both! Anyway I'm thinking about bigger shift: ditch margins completely and switch to flex/grid gaps. Maybe I'll leave margin-bottom just for "p"...

[@readyplayer2197]

It sure does sometimes feel like we have to do css all over again. Like from scratch.

[@davilinkicefire]

At some point they might think of creating a new variant of styling language that start from scratch (to fix the weird and wrong default behaviour) with a new html tag (or a attribute on the ). I don't think that would happen, but who knows what the web would be in 20 years. HTML7/CSS24/JS54 xD

[@micemincer]

why not use :first-child instead of * + *

[@momakplayz7985]

I dont understand anything in this video, can someone please help?

[@datmanUK]

Please god bring out Subgrid I think this will solve so many things. We need to create some sort of movement.

[@najmantube]

The codepen only has default styles ... none of the stuff discussed in this tutorial.

[@akashmurugesh3509]

Can anybody tell me why I haven't faced this problem ever?

[@knight_kazul]

12:20 Can't you just use :where(*:not(:first-child)) ? That should keep the specificity the same.