The most INFURIATING thing about CSS and how to deal with it!

so like isn't it so much fun when you add a margin top to something and instead of that thing moving it's actually the parent that moves down instead yeah that's just great stuff right well that's part of collapsing margins which is one of the stranger and more counter-intuitive parts of css and one of the things that's even more annoying with it is that it's not consistent because if you have a flex container or a grid container uh you throw a display flex or grid on there right it it no longer collapses the way it was before now there are different solutions to solving all of this and getting consistency in all situations uh so what we're going to do in this video is we're going to look at first why this is happening understand the whole collapsing margin thing we're going to look at some sub-optimal solutions that i often see and then we're going to dive into some more practical examples and practical ways that we can overcome this and make sure things are consistent every single time no matter the situation or the context so just in case you're not sure even what collapsing margins are anytime you have text elements as a you know the default styling on all of our text elements always has a margin top and bottom on it and if we look here in the dev tools there we go i don't want the whole thing to be blue come on this is because we're in codepen there we go um we can see the h1 there as a margin top and then the margin of my paragraph they're melding into one another they're blending into each other so even if i made my uh paragraph have a margin let's just do it now p margin top mark margin you got to spell things right margin top of 20 pixels it doesn't move and if i change this to 10 pixels 10 it's the page is going to refresh or whatever and nothing nothing happens here nothing is changing because it's using the margin bottom from the h1 here to set the size and this because the default of all of our text elements has a margin top and bottom this is actually a good thing in a way because it prevents this double spacing annoying thing from happening which could otherwise happen but it also is really annoying because it's kind of hard to predict you don't always see it coming and what's really really infuriating about it is when you have things like we have here right on my screen and i say h1 and i want to move my h1 down and i say i have margin top is 100 pixels and that happened wait what that happens and and then you go wait no i need it down what's going on it's the whole parent that is moving and that's just crazy sauce right and if i just turn that off completely you can actually see by default like there is the default margin that is on this h1 and that's giving us our our space right there and that's really really annoying and let's just throw a text align center on here because we're going to make this thing look better as we learn about these two um but you know this is absolutely infuriating having that space there and in general like this you don't want text that's all crowded around like that anyway so you might be going well kevin on this hero you might have some padding that's true i might have a padding of like 1m or something on all the sides and that sort of fixes the problem except now it's actually 1m plus the margin that was there and that's kind of frustrating too but we'll get back to that in a second and you might be seeing this padding as a solution to the problem as well and we're going to get there in a second as well there's another issue with collapsing margins and that's that they don't always collapse sometimes they're collapsing in other situations they're not so what i'm going to do is i've prepared this ahead of time there we go and we're in on comment that's we have three copies but this one is a hero grid and this one is a hero flex and up here we have our hero default which is just the regular you know display block type thing and what we're going to do is we're going to come in here and we're going to uncomment this line right here and we're getting our flex is now a display flex our grid is now a display grid and these ones aren't collapsing and this one is collapsing css is fine isn't it guys isn't it it is though once you understand what's happening and the reason for this is display flex and display grid are actually creating new formatting contexts whereas by default a display block isn't doing that so that's the reason for this margins don't collapse between the child and the parent when there is a when that parent is creating a new formatting context so that's the first thing we're going to circle back to that as we go through the rest of this um the other thing though that i want to look at now and one thing that you know i i guarantee you people have done is they'll come in and they'll throw padding on the hero because you never want your text to be touching there anyway um and this should make everything a little bit more consistent so we have our spacing there spacing here it looks all the same now so that you know you're saying padding can fix it and maybe you've actually used padding in other ways that have been interesting um you know you come in with your h1 you add your margin top and now it actually pushes it down instead of pushing the whole thing down because this padding what the padding is doing is it's creating a cushion between the the top of the child and the top of the parent because we have that cushion there now the margins can't touch each other the margins aren't touching they're no longer collapsing and then it's behaving a little bit more how you'd expect it to uh but what we're going to do here is we're going to make this a little bit nicer and we're going to do our hero content which is the box inside and on this we're going to say that this has a background that is we'll just say white for simplicity's sake and we get this white box that comes in like that um let's give this actually just make it look a little better width can be like 70 percent and a margin of zero auto um just so we have something like that and already these ones are looking better and this is the exact same situation we were in just before where this one and the margins aren't collapsing on between the inner and the parent there because of the display grid thing or the display flex thing that's happening so if we come and we take a look in there and we look at what's happening here and i know it's really zoomed out and it's less important what i'm looking at in my dev tools so we can even move this off a little bit but we can go inside this div and you can see that the h1 is not collapsing there so we have our hero content and then that over there and that's on a flex one and it's the same with the grid but if we come up to the the other one here you can see that here inside the hero content the h1 is like the margin of the margin of the h1 is sticking out the top of it this is the whole collapsing margin thing happening again um and this is again where you often see people coming in and trying to add in the margin top but then it pushes you know in this case it's actually doing what you'd expect it to do here it's doing not what you'd expect to do let's make this a little bit smaller um and one of the other solutions and this is one of the things that i see people do all the time is to come in on whatever the background is and do something like padding top uh one pixel and by adding that one pixel of padding you can see it's actually fixed that situation up here so let's turn that off and we can see that now we get the weird behavior and then we turn it back on and you know let's make this a bit bigger again just we can really illustrate what's happening so when it's off you get this weird behavior like that it's collapsing and then the padding's creating that small gap it's preventing it from collapsing the issue with this is it's just really hard to be consistent right or you come across something or if you're in a team and some other member comes in like why would you put one pixel of padding on that what's going on um you can even you can push this right you could do that and it's still gonna work because there's something that's there but again a team member comes across this and they're just confused or you come across it 18 months later and you're just confused about why you would do something like that so you delete it you don't notice a change right away so you leave it and then all of a sudden you find out later that you broke half your site so instead of something like that one solution that we could use is and if you know we're sort of doing it with the grid and the flex here but we don't want to have to do it with a grid or flex all the time so one solution is to use a display of flow root and a display of flow root will give you the same solution so you can see here there's there's no more padding on here and i can go and throw this as big as i want and it's going to be working the same way as it is here and that's because a display of flow root the entire reason we have this property is to create a new formatting context and new formatting context means its margins won't collapse with its child's margin anymore and it solves that issue so that is one way that you can 100 approach it and get nice consistent layouts uh flow root generally is also really useful if you were using floats i know we don't use floats nearly as often as we used to but if you are using floats this is also something that can be really useful there but it is a nice little way that you could fix this collapsing margin issue but in my opinion there's you probably don't even need this all that often but i wanted to show it to you because i do think it's really useful um but for me the the best way of handling all of this anyway is like it's really hard to figure out what the spacing is all around this right because i have my padding uh let's go on hero content let's say i wanted padding of 2m it's gonna be pretty big but we want a nice healthy amount of padding and the problem now is this padding is actually this 2m plus this 30 pixels and you get this really big gap on the top then you're playing around with different numbers you have two different things they're competing against each other so like ideally this h1 is actually gonna have a margin top of zero right and h2h3 whatever the element is it doesn't matter um and then you even out the space that's along there and that's great and that's nice but it's kind of annoying having to run through and say margin 0 and everything so one solution i got this from andy bell i'm gonna link to uh his stuff down below he has uh runs piccolilli which is just an amazing css resource so i definitely would check him out but let's say you came in and you said your h1 your h2 your h3 all of your h stuff and your paragraphs and maybe your ordered an unordered list sue they'll just have a margin of zero now the advantage of doing this is now you get nice consistent spacing everywhere but the problem with it is and even i'm gonna uncomment these two that's on comment those and the the annoying thing now you know things are all stuck together which we don't want so we sort of have to bring space back and let's add two more paragraphs here p times two uh lorem 10 this is emmet if you don't know emmett check the card right there because i went into it in a video recently super super useful for doing things really quickly but um here we have three paragraphs and we want space between them because it looks like one big block of text so the solution here is i'm going to come on my hero content and i'm going to say flow content or you know what let's just let's shorten that up and just call it flow because we like typing less content or less lines but we can just do flow and say dot flow and the fun thing with this is you're not selecting that selector you're doing a star plus plus star and you're saying that the margin top and i'm going to explain the star plus star in a second is we're going to start with this we're going to make this a little bit better in a second uh we'll do one m you can definitely do rems too and so we have the flow and then we have the star plus stars giving us a margin top of one and look at that we have our spacing again and let's come in here and let's just do background is red so we can see what this is doing and you can see it's making this one this one and this one my my my h1 here is not getting it and let's just come in above the h1 and throw in a div just for the fun of it um because we're just going to add something to the top and now you can see the h1 is actually getting that background red on there whereas this div is the one that's not anymore so what this selector is doing is it's selecting every element except the first element within that in within here so it's looking at the direct children within my flow so within this here and i'm not putting this on hero content itself i am making this its own selector so i could reuse this anywhere i would need to use it um and is this annoying yes it's a little bit annoying that we have to take this extra step 100 but this is actually something that the css working group is even admitted as a mistake um so you know they've come out straight they have a list of mistakes they've made so one of them is actually talking about collapsing margins so by doing it this way we're sort of getting things working the way that it probably should be working and if you want the full list check out the description up i put the link to the full list in the description below um so what we're doing now is selecting everything but the first element and we're adding space on top and we're not adding any space on the bottom and because we're not adding a margin on the bottom with this it also makes the spacing on the top and the bottom consistent which is also really really handy i've had another video where i talked about this and a lot of people asked me about why we don't do it like this not and then say here first of type that's a great question it really is a good question um are not first of type first child sorry first child because first of type you can see it's messing things up um this is more readable 100 but the problem with this is it raises the specificity of it and in general that might not cause a problem but every now and then you might run into an issue because the specificity of this is actually going to be like two class selectors uh because of the pseudo selector right here so uh yeah it has the because the the not selector doesn't actually raise specificity but this guy here is raising it so it could you could run into issues with it and then it's always you don't want to run into it and if you're working in a team or you're worried about the readability of it we have comments you can throw a comment in there and explain what this is doing no problem so we get a nice consistent spacing like that and the wonderful thing with this is it doesn't matter if it's a flex or not flex or anything else like that it's always going to be consistent from one project to the next one one situation to the next one and we can even step this up a little bit by saying here instead of one ram we could actually do this as a css variable so we could come in here and say that this is my var uh we'll call it flow space comma 1m and because this is a variable that's not being defined it's going to go and fall into this guy right here and that means it's using that one m but if flow space is defined then we can actually do something a little bit better with it so because of that what we could do is you know you could have your regular flow and then you could be using that throughout your entire site and then maybe your hero you actually want to change it so in your hero you could define flow space and we could say that's 3m just so we actually see a difference or we could say it's 0.5 and it gives us this control that we can overwrite and change it when we want to change it but if we do want it to be consistent everywhere it can just be consistent everywhere but we have that control of easily being able to overwrite it and then as annoying as these collapsing margins can be once you overcome it that's fantastic but there's also a lot more to margins and one thing people don't realize is all the amazing things you can do with auto margins we always use them just to center things horizontally but they can do a lot more than that if you would like to check out a video or learn more about it it is right here for your viewing pleasure and with that a really big thank you to both zack and randy who are my supporters of awesome as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 41,236

Rating: 4.9714966 out of 5

Keywords: Kevin Powell, css, html, tutorial, css frustrating, collapsing margin, collapsing margins, css tutorial, web development, learn css, css tutorial for beginners, css is frustrating

Id: qKiz9gdJdr8

Length: 14min 31sec (871 seconds)

Published: Thu Apr 22 2021