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

Подписаться 913 тыс.

Просмотров 64 тыс.

50% 1

Collapsing margins are incredibly frustrating when you don't understand them, but once you know how they work, and in what situations, you can find solutions to work around them.
Codepen from this video: codepen.io/kevinpowell/pen/NW...
CSS Working Group Mistakes made in CSS: wiki.csswg.org/ideas/mistakes
More information on Formatting Context: developer.mozilla.org/en-US/d...
Andy Bell / Piccalilli: piccalil.li/
Also follow Andy on Twitter: / piccalilli_
⌚ Timestamps ⌚
00:00 - Introduction
00:51 - What are collapsing margins?
03:02 - Differences when using flexbox and grid
06:08 - The wrong solution I see all the time
07:15 - Using flow-root
08:36 - A more ideal solution with a lot of control
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 214

@KevinPowell 3 года назад

What other things about CSS drive you nuts?

@holigan5392 3 года назад

Try sass

@KevinPowell 3 года назад

I love Sass :)

@Rafiozoo 3 года назад

z-index may become quite funny ;)

@hopeofglory8108 3 года назад

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 3 года назад

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 3 года назад

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.

@MrBrax 3 года назад

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

@mohamedyamani8502 3 года назад

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.

@benyosu843 3 года назад

@@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 3 года назад

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

@DietChugg 3 года назад

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 3 года назад

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)

@Manas-co8wl 5 месяцев назад

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.

@piromaniaco3579 3 года назад

Dealing with exactly this "infurating" issue at this right moment and RU-vid 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.

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

@creativereasons7588 3 года назад

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!

@shivamchandra.0654 3 года назад

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

@guillermoandradaFSD 3 года назад

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 3 года назад

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

@benyosu843 3 года назад

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

@xstrafez_c2017 3 года назад

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

@chaimrochlitz8523 3 года назад

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!! 🙏🙏❤️❤️

@judonomi 3 года назад

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!

@patrickc.6183 3 года назад

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.

@guestofallah7661 3 года назад

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

@pearlboy 3 года назад

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

@MASTERRAGE 3 года назад

That thumbnail XD

@alvaro.makes.music1 3 года назад

he's truly infuriated!

@iamvictorlennon 2 года назад

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

@jaydenmoon1165 3 года назад

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

@hashkeeper 2 года назад

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

@technikhil314 3 года назад

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.

@AbhinavKulshreshtha 3 года назад

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

@quangtoanta8577 2 года назад

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

@maneeshrockx667 3 года назад

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

@aCitizenJOSerased 3 года назад

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

@jasonleelawlight 2 года назад

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.

@emperoroftheearth3215 3 года назад

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

@josvelema2362 3 года назад

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 😆

@cezargheorghiu2606 3 года назад

Another great tutorial! Thank you!

@shaunpatrick8345 3 года назад

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 3 года назад

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

@ashkanahmadi 3 года назад

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

@sheriffderek 15 дней назад

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.

@p_o_z_e 3 года назад

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

@sihemtoutsimplement6616 3 года назад

Great video ,thank you !!!!

@hugodsa89 3 года назад

Honestly the very best CSS content, period.

@hugodsa89 3 года назад

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 ❤️

@CharlesSmall 3 года назад

Thank you Kevin

@jradplowman 3 года назад

Best thumbnail ever!!!!

@jontrillana3989 3 года назад

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

@oluwadamilarechukwudi9465 Год назад

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

@am53n8 3 года назад

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

@riadkhan9798 2 года назад

you are a life saviour it was making me crazzy

@JohnBortins 3 года назад

Outstanding!

@56polobzh 3 года назад

Thanks for the nice tricks !

@mrshnp 3 года назад

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

@susmitislam1910 3 года назад

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 3 года назад

@@susmitislam1910 I completely agree with you kind sir

@DietChugg 3 года назад

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

@jkovert 3 года назад

Yes, it's gloriously unscientific.

@sulemanmughal5397 2 года назад

You are a legend sir 🙏

@daleryanaldover6545 3 года назад

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 2 года назад

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

@pulok9909 3 года назад

Really great!

@ibadshaikh2215 3 года назад

The way you accept css is just awesome 😂👍

@nro337 3 года назад

Thank you!

@deamorta6117 3 года назад

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

@avneet12284 3 года назад

An amazing video

@SivakD 3 года назад

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.

@diwakardayal954 3 года назад

Op thumbnail 11/10 😂 Keep it up

@KevinPowell 3 года назад

Thanks 😅

@AndersJytzler 3 года назад

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?

@bnodtwari 3 года назад

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.

@MaxWeir 3 года назад

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.

@eotikurac 3 года назад

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.

@carolmckay5152 3 года назад

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.

@user-mo3cw6go7c 2 года назад

Thanks!!!!!

@2SaltyRecipes 2 года назад

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.

@somnvm37 3 года назад

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

@27sosite73 5 месяцев назад

thnak you

@jenstornell 3 года назад

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.

@schattenbrot7013 3 года назад

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

@PaulMcCannWebBuilder 2 года назад

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

@kumarvadivel4328 3 года назад

hey kevin can you put video for responsive font sizes

@KevinPowell 3 года назад

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

@mverma7845 2 года назад

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?

@AutsajderRR 3 года назад

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

@theshredguitarist25 2 года назад

“That’s just crazy sauce!”

@AdarshSingh-qd6mq 3 года назад

How do someone get CODEPEN tshirt ??

@_fRiction_ 3 года назад

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

@hubertlenningrad2252 3 года назад

This is why I always code everything in binary.

@weshuiz1325 3 года назад

"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 3 года назад

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 3 года назад

@@KevinPowell dw microsoft will drop ie support in aug

@IAmLesleh 3 года назад

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

@eddymison3527 2 года назад

there is no way hahaha...

@IAmLesleh 2 года назад

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

@Victor_Marius 3 года назад

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

@idontknowwhatimdoing8941 3 года назад

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 3 года назад

so the people is what infuriates you or the CSS?

@idontknowwhatimdoing8941 3 года назад

@@juliosoto9471 Both.

@DominicFuchs 3 года назад

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

@theshredguitarist25 2 года назад

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

@kinstar 3 года назад

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

@justingiovanetti 2 года назад

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.

@initiallytk Год назад

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

@thegreatbambino3358 3 года назад

3:55 Jen psaki starts taking notes...

@donaldabanoub6382 3 года назад

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

@KevinPowell 3 года назад

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.

@Lil_Puppy 3 года назад

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.

@matiaslauriti 3 года назад

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

@frontend3409 Год назад

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

@jaceborg 3 года назад

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.

@CeezGeez 12 дней назад

hadn't heard of this until today lol - 😂

@readyplayer2197 21 день назад

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

@priyankpravinchandra9625 3 года назад

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

@momakplayz7985 2 года назад

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

@aryanchoudhary5640 3 года назад

Can i learn C++ directly before C anyone tell me pls

@knight_kazul Год назад

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

@davilinkicefire 2 года назад

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

@sharakpl 3 года назад

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 3 года назад

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 3 года назад

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