 Welcome back to the CSS podcast. This season, we're answering your most common, most burning, most why won't this just work CSS questions. And today, we're covering a very common CSS capability, which is adding margins. You'd think it's straightforward, but sometimes you run into some weird situations where you just can't figure out why that margin isn't applying like you expected to. So like the other episodes, we're going to start with a little scenario to help give the topic some context. Let's say that you need to style some parsed markdown. You might find confusing margin issues when trying to push headers away from paragraphs, or you might get more margin than you expected when you add grid or flex as a display type because you removed margin collapse. Ooh, margin collapse. We'll talk about that one today. And it's worth noting that we have an episode all about spacing and margins, which is number 13 of the CSS podcast, as well as a free Learn CSS course module on them, which, classic off by one error, is actually number 12 for the Learn CSS course. But today we're debugging margins. We've compiled a short list of reasons that margin might not be working and how to fix it. So when you run into the issues, you've got a few things to try. Awesome. All right, well, first up is knowing that user agent styles apply default margins, like for typography and stuff like that. So you may be competing with these existing styles. With parsed markdown, it can be a good idea to scope your custom margin styles also. The body even has a margin of five pixels by default, and you may be collapsing with it or competing with it. I remember one time a coworker had started a new project and put an element on the page, and then a child element with some margin on it, and it moved the parent. It's like a child's margin was moving the parent element, and they were like, what's going on? It was taking the parent within. This stuff can feel really slippery sometimes. And they fixed it with overflow hidden, which is one of the many ways that you can tackle some of these margin issues, just depends on what you need. Yes, definitely depends on what you need. So another reason could be that you have something in display inline or display table cell. When you have elements set to inline, you're saying that you want it in the flow of the current block on the same line. So an inline element can't push things in the block direction, and any margin that you add to it in the block direction is ignored. So if you have margin, like say, margin two rems on the element, it'll push sideways, like it'll push inline because it is inline, but it can't actually push up and down. So if you have a span element, which is inline by default in a paragraph, you might see that it's not respecting that margin top and margin bottom, and same with if you have a div, which is inline for its parent, it's not gonna be adding margin around itself. But you could do padding, so you could still apply padding to the inline elements. You just can't apply margin and have it apply in that block direction. And the same thing goes for table cells. The table spec literally says internal table elements do not have margins, but for tables, you can use border spacing or center it using margin left and right auto or margin inline auto, that still won't give you that block spacing. So you probably want padding for that in tables too, but just some stuff to think about. Stuff to think about. Junk to think about when you just wanna add some space. And speaking of like vertical, it's all about spacing. It's easy, right? Just kind of move, I mean, just like boxes. All we do is make boxes and move around. It's easy, right? Oh, I wish sometimes. But you mentioned there vertical or block margin, not working for inline elements. Well, there's another kind of tricky part of vertical and block margin. And it's that it can collapse and you can, you will only find margin collapsing in vertical or block margins. You won't find them inline, which was kind of a weird CSS thing, I guess. But I mean, they were trying to make it easy 25 years ago. So like one of the things to think about was this, only if they're adjacent will they collapse. So if I have margin on like this item and this item, oh, I'm holding my hands up. If you have two items stacked on top of each other, right, they're adjacent, their margins will collapse. The largest of the two will be the one that's used instead of them being combined. So the bottom of one was 20 pixels and the top of the other one was 40. You would be 40 pixels of margin between them. If one is smaller than the other, so it can be like, you can have this moment where if one is smaller than the other one, it appears to like not work. Cause you're like, I thought I added margin here, but it's collapsing with the one that's larger. So that can be like a debugging moment where you're like, I thought I pushed this 20 pixels away, but the one underneath it was pushing it 40 pixels away. And so that's how you get into a scenario where it can feel like a margin is completely ineffective and it's collapsing with another one that's just larger. And then that moment where we had a child element moving a parent, that's like child's margin has grown so large. It's asking for so much space that it's even pushing its parent element to enable that amount of space. And so you can find that block and vertical margins have these collapsing moments and they can be a little tricky and wiggly sometimes. Yes, so margin collapse is an important concept to wrap your head around, especially when you're working with some baseline styles from the user agent. Another thing, I don't know if we added this to our notes, but with margin collapse, if you're expecting that, when you add like something like display grid, so now you're in a different display mode, you don't get the margin collapse. Everything inside of it gets its own full margin spacing. So if you apply display grid to a parent and then you have some text in there, which would, without the display grid, if it was just display block, have the collapsing that no longer collapses those elements in the grid context. So that's another thing to kind of note, if you're expecting or not expecting the margin collapse, check the display mode because that might be changing the context for enabling that collapse. I keep doing these things with my hands if you're watching. Do, do, do, do, do, do, do, do, do, do, do, do, do, do. Right, that's a bump, bump, bump, bump, bump. It's a chicken dance. Do, do, do, do, do, do, do. Okay, anyway. So another reason that your margin might not be applying is specificity. You might actually be losing it somewhere in the cascade, which could really apply to anything. I guess I could apply it as the index too. So to make sure it's not specificity, first check dev tools, the styles pane to see if that margin is getting overridden. Also make sure they don't have any unexpected reset or normalized styles because if you are expecting some default margins from the user agent, a reset style sheet might be another reason that you're not seeing those margins applying. And if you're used to leveraging some of those browser defaults from the user agent, you might be confused and like, where did, where did those, where did that go? So that's just one more thing to check out. And if you still can't find it, consider cascade layers to better organize your styles. This prevents specificity conflicts because you're specifying the layers of which your styles are applying. And remember that unlayered styles will win over layered styles. So if you are using layers and you're using a reset that's not layered, it's actually going to beat your styles that are layered. So make sure that if you are using a reset, you are layering that and not the other way around. Cause that'll be another reason that you might see some weird things with your margins. It's the unexpected layer application. Get ready for an episode on why is my layer not working? Yeah, that's true. Yeah. Episode number 77. Well, why is my style not applying? Just generally is that's one. We should have started with that one. Totally. Well, that's going to be throughout, I suppose. Yeah. This next section we have is about block formatting contexts or BFCs, if you're an engineer on Chrome, they're always just like, oh, it creates a BFC. And you're just like, am I supposed to know what a BFC is? And you're like, oh yeah, block formatting context. If you don't know what that is, let me briefly just remind you, and I don't expect you to know what that is. It's always been tricky. These are containers that contain internal floats, including external floats, or they, well, let's see, they contain internal floats, they exclude external floats and suppress margin collapsing. That was a lot of words and stuff that I'll give you some more context. Okay, so like if you set overflow on something like overflow hidden, that creates a block formatting context. It also clips the content. That's part of its feature set there. And maybe you don't want that because you have like box shadows. And so you wanted the block formatting context, but you didn't want the clipping. So there's other ways to create block formatting contexts. Another one is display greater flex, like you know what I was talking about. This will remove margin collapse. It also enables fun stuff like margin auto to work as you expect. Like we're always wondering like, why doesn't margin auto just do all the sides and be in the center? Well, it has to do with collapsing and block formatting context. Yes, that's a good point. So yeah, you set display grid on one and boom, margin auto in every direction, block in, inline works great. Absolute positioning removes items from the flow and they don't have margin collapse. And then there's also this kind of trick where you have display colon flow dash root, which is another way to create a block formatting context. And it's like display block, but it does create that context in a way that allows you to dodge clear fix hacks for like floats and stuff and not have to use overflow hidden. So if you want to create a block formatting context and you don't want to overflow and you don't want to display grid, you can set display flow route to just create one. And fun fact in 2010, Nicole Sullivan was asking for this feature. They wanted to create block formatting contexts without any side effects and now we have it. And so that's the feature. Nice. So another margin gripe that you might run into is if you're styling emails, which have their own set of fun issues, but it probably means that you're using tables and table display cells to apply the styling. And as I mentioned earlier, you can't do margin adjustment in table cells. So that also means that you can't position things with negative margins, which I use all the time. And I think we're pretty used to where styling things, kind of layering things on the web. So you might run into that if you're trying to apply margins on table display, like designing with TD cells, just you can't do it as hard. You can't do the negative margins and those table display as many email clients just don't allow negative margins. Yeah, negative margin margins, those are tricky, but they can also come in so handy. Oh yeah. Funny. All right, so what, like, here's a one, we talked about it a little bit, like why doesn't margin auto just work? Or really, like the harder question is why doesn't margin block auto ever work, right? Margin inline auto is pretty reliable. It's margin block. Well, it's all margin collapse's fault. And it has to do with BFCs, block formatting contexts. And the easiest way to see margin auto work is to put that auto element inside of a flex container. So boom, you do display flex, you put margin auto on the child and now you're in the center. There's no more collapsing. You made a new BFC and there's your item in the center. So the new BFC means we're not gonna do margin collapsing inside of here. And we got a formatting context that can work with margin auto, so. I'm glad that you brought this up because I feel like this is something that I ever really think too hard about. It's just the way that life is. But it's nice to talk about why. Yes, I think that that's great. So let's get into some tools or tips or tricks. Like the last episode on Z-index, DevTools has CSS hints now, which are awesome and let you visually see when you might not have margin applying in certain cases. So check out the CSS hints if that applies to you. But of course if you're doing things like, oh no, why am I getting all this extra margin in a flex box or a grid layout? It's not gonna tell you that you've made a mistake. That's something that you kind of have to know. So CSS hints won't help you there. It's just if the value isn't applying for some reason, say a table cell. Nice, and DevTools can help you. I think it's a little known feature, but if you hover over the margin property, like the word margin in DevTools, it will highlight all the margins for that particular selector. So if you have like the button selector and you hover over the word margin in that styles pane there, all of the buttons on the page will have their margins highlighted all at once and you can see them. And I think they're orange. And yeah, so there's a cool way to do it there through DevTools. Visbug also has a margin tool. So it's a little different, a little bit kind of special in some ways is, and it's its own tool. So you launch Visbug, you select the margin tool and as you click on items, it will show the margin for them. It will even show the margin collapsing. So if you were to, for example, we had an earlier example, two siblings. One had margin 20 and one had margin 40 and we had margin collapsing where the 40 was the one winning. You could use Visbug to click the first item, hold shift and click the second item to see both of their margins. And it would show the bottom one being 20 and the other one being 40 and you could literally see their overlap. It's the first tool that I know of that shows you margin collapsing visually because it paints both as we see them and then you can see them combining together, which is kind of cool. I remember when I first started about margin collapse, I thought of it as like the bigger margin eats the smaller margin. Like it just chomps it and then the bigger one wins. Like it's like, oh, now it's in the belly. I don't think that our listeners need that juvenile explanation but I think it's a fun visual. I like it too. It's almost like it's big enough to consume it. It's like you are part of me now. Right, exactly. Like a little, like a big whale. Like we're- Yes. We should write a little CSS storybook. I like it, good idea. Yeah, thank you all for joining us on this episode about margin. It's so great that you appreciate the podcast so we appreciate listening to us. We do, it's true. And if you have any CSS questions, we'd love to answer them on the show. Just tweet us with the hashtag CSS podcast. I'm Yuna on the internets, that's at UNA. On Twitter, I'm also yuna.im on Blue Sky. So if you have questions, comments, you can find me there. I don't know what I am on. I think it's Yuna at front end social on Macedon. I don't know. There's so many things now. So just, if you look, you'll probably find. Yeah, you'll find her. And I'm Argyle Link on Twitter and I'm nerdy.dev on Blue Sky. And Yuna, your question could help a whole lot of people. Yes, and if you liked the show, please give us a review on whatever podcast app you're using or share this with a friend. Or if you're watching this on YouTube now, hit that like button and that subscribe button for more stuff from our whole team from all of the Chrome dev, dev rels. There's a lot of great stuff here, especially like the what's new in DevTools, like what's new in Chrome, like kind of staying up to date, gooey challenges I heard is okay. So yeah, hit that like and subscribe and also share this with people that you think would like it. That's a good call to action. Do that. That's a nice thing to do. We miss you already. Bye y'all, we'll see you next time.