 CSS can be just infuriating at times because there are some really strange things that it does. But, my friend and friends, there's some good news, is that a lot of those infuriating things, they actually happen for good reasons. Once you understand the why behind these infuriating things or these strange behaviors or these counter-intuitive things that you just can't wrap your mind around, well, it just starts making a lot more sense. And the best thing with that is because you now understand the why, it's less frustrating, but it makes CSS more predictable, which makes it more fun to write. So in this video, we're breaking down a few different behaviors that are kind of strange. We're going to look at the reasons they happen, and some of them we'll look at use cases you can use to sort of take advantage of that. And at the end, there'll be a little bonus tip that's going to look at a little hack that you could use that involves specificity. So let's go and dive in. All right, so here we are in CodePen and you see I have a div with a class of height in here because the first thing we're looking at is height as a percentage. So let's choose that guy. We're going to do our dot height to select that div. And on there, what we can do is give it a height and we'll say height is 100 pixels. We'll start with that. And let's give it a background color too. Background will be lime green. So we can actually see it and that works. And I can do 200 pixels and then I get 200 pixels. And I could do 500 pixels and I get 500 pixels. But what happens if I come in here and I put 50% because I want it to be 50% and then it vanishes? Where does it go? Well, it doesn't know how big it should actually be. And this is an interesting thing with height. When you do want to set it as a percentage, it needs to be the its parent or its containing block needs to have a height declared on it as well. And that's why it's really, really common. A lot of the time you'll see sites that have are like this HTML body and they'll have a height of 100% because even just setting a height of 100% on the body will not do anything because it has a parent, right? It has its containing block, which is the HTML. So by doing this, the body is the full height of the HTML, which has the whole height of the viewport. And then my height guy here can start working. And you can see that it's now at 50% or I could change that to 20% or so on and so forth. There is another little thing here that's kind of interesting, though, is if I come in here and I say that this is wrapped inside of a section. So I have my height there and it breaks it again because now this is going, well, 20% of what? I don't know how big my section is. And what's really interesting here too is if I add a paragraph and we add some content in here, that section will have that content. But this div that's right after my div of class height, it still doesn't know how big to be because this is based on the intrinsic height of the section as the content changes, the height of my section is changing. And so it's a little bit the same reason why we can't do animations with height auto and then going to a height zero to height auto doesn't work because height auto, it's unknown until it's finished calculating. So if I then came on here and same thing, I said section has a height of 200 pixels, well, now this div knows how big it can be. It can be 40% of that 200. So we can then do, you know, play around with that number and it's going to base its height on the height of that section. So you always need to have a height declared somewhere else for that to work. But if you know me, you'll also know that I don't really like declaring heights very much. It's one of those things that often can get in the way I talked about that in a video where I talked about responsive design and some issues that you run into. So if you're curious about that, I've linked it down in the description below. But height as a percentage is definitely something that can be annoying. This is why you often see things like this because it sort of starts opening the door to using heights in different ways. So it is quite common to see something like that. And that is why. All right, the next up is something that I actually have talked about before, but we're going to look at it again. Here I have an image and this is to deal with the space that is below images. And we're actually, I'm going to bring in a second one here. Let's do a image to which I already have ready right there. And so here we have my two images, same image for both of them. But on this image too, let's just say we have dot image to with a background background of we'll do orange and get an orange background on there. And notice that there's this space that's underneath here. And this is all based on the font size. So actually, if I make this font size bigger, the space underneath it will increase. And if I make this font size smaller, the space underneath it will actually decrease. And so the, yeah, so we get this annoying space that can show up under images. Images are inline elements and you can put them, they behave like inline block, but their default behavior is inline, even though they're effectively inline block. But either way, it doesn't make a difference on this. What they're doing is they're setting up to be inline with the text that's here. And inline means that they're going to sit on the baseline. And the baseline, you can see, let's make my font size bigger again. So the baseline is the bottom of my letters here. So the letter M, let's say you can see the baseline is the very bottom of the letter M. And there are letters that drop below your baseline. And what's happening here is the image is setting up not to line up with the bottom there, but to line up with the baseline of my text. And we can actually change that behavior. And let's bring this back down to a two. And so I'm just going to select both images at the same time. And we're going to say IMG and we're going to do a vertical, a line of bottom instead of baseline. So this is one way you could fix it. And you can see here, it's sticking out the bottom now. And you can see why that's the default, because this looks really weird. The thing is, this is not a situation you see very often anymore. I think it was much more common when the web was first invented. And that's why it became the default. But now you can see it's actually fixed it there. And you can do different things here with vertical line. You can even do a, it's not center, I always rate center, center, it's actually middle. And that would line the text up with the middle. And of course, you could do a top, maybe others here that you could too. But those are the ones that you'll see sometimes. I don't do this to fix the problem though. My default is to do a display of block and a max width of 100% on my images every single time, because this will make sure that my images are responsive. So if there's not enough space, they can shrink down. And the display of block does ruin the setup that I had here. So if ever, you can know that if you do this, it could cause problems there. But most of the time we treat images on modern websites, we're treating them like block level elements anyway, or they're getting thrown into situations where they're, you know, in columns and other stuff and the whole block thing goes out the window anyway. And because it's block, it doesn't have that baseline setting on it anymore. And you do not get that annoying space underneath it. And the third one is a bit of a strange one. And it's how padding is calculated. So let's do my dot padding. And what we're going to do here is we're going to say padding top is 50%. And let's give it a background so we can actually see it. So we'll do our lime green again, because I like that color. And well, 50, holy moly, that's big, but look at this. It shrinks and grows based on my screen size. What's happening here? Why is this happening? And padding top and bottom, and this is the same if I did a margin, margin top of 50% is actually, so let's just give this a height. So we can actually see it, height 100 pixels. And you're going to get the same type of thing going on where that margin is increasing and decreasing based on the viewport size. Now it's not always going to be on the viewport size. The margin top is just like the margin left. If I have a margin left of 50%, that 50% here is based, it's 50% of the parent. Now in this case, my parent happens to be the viewport. But let's say we come in here with another div, we'll just do a section again on that to speed things up, I guess. So we get my section that's here, my div inside my section. So then if I said I have a section with a, let's give it a border of two pixels solid black, and we'll give this a width of 500 pixels, and we'll give it a margin of zero auto, just so it's in the middle. And you can see that this green box is taking up 50% of the whole thing because my margin left of 50% is 50% of the parent. So it's interesting what this is, if I do a margin, margin top of 50%, that margin top is actually 50% of the width of my element. So it's taking it's taking this width. So from here to here, and then it's turning it sideways and putting it on top right there. And to really show you that that's what's happening, we can do an inspect on there. We can go over to my computed. So here you can see the margin left is 250 and the margin top is 250. So they're both the same value. And so this is a bit of a strange behavior, but it happens to prevent recursion, because normally elements don't have fixed heights, elements will change based on the content that is inside of them. And so if I have content that is inside of here, and let's come up with some real content actually, real, real enough, lower 40. So we have quite a bit of text. And now the height of it has changed. And let's also switch my width here to be percentage based. So we're going to say 50%. And now the problem is the height of this element is changing based on the the width that it has. So imagine if this margin top was actually based on the height of the parent, as this was getting smaller, the height of my parent is increasing, but that would also increase the margin top. And it would just create but then the margin top is increasing, which is increasing the total height, which is then going to increase. And it just goes into like a recursion loop. Now you might have seen people taking advantage of this, or you might see old tutorials that look at how you can use this trick with a pseudo element. It was a hack to get an aspect ratio, because you could take advantage of that padding to match the width of the parent and make a perfect aspect ratio. And you make a perfect square, or there was other ways of getting specific aspect ratios. It was a really clever approach, but luckily we don't need to do that anymore. Just because we can come in and actually set them, I'm going to just reduce my text here a little bit, because we have way too much to show this off. So let's just take off my margin top for now. And if you need something, you do an ass aspect ratio of one over one, or you can even just do one, if you want a square, I like the one over one, just because then it gives me a perfect square. So the width and height are equal. And if you need different aspect ratios, you can just change the numbers. So we luckily, we don't need this anymore for the aspect ratio padding hack, we can just do it this way. But it was a cool trick. And yeah, it's important to understand that margin top bottom as a percentage or padding top and bottom as a percentage are looking at the parent's width. It's really weird. But once you know it, you can work with it. All right. And with that out of the way, we have one last thing that I want to look at, which is kind of interesting. This one's a really, really strange one. I'm not going to dive into, I don't know if you'd ever really want to use this, but if you really were getting frustrated with something, you need to boost specificity on something. Let's say you have something, let's just say my text color, because it's going to be the easiest thing to change. And let's say you have a class, you know, my class of padding, for some reason, I have a color of red on there. And it's going to change my text to red. You realize that's really ugly. For some reason, you can't change the selector. There's some other selector that's putting the color on here. You can actually boost specificity if you have a class by doing padding dot padding with a color of black. So it goes back to something that's readable, which red on green is not. So you can boost specificity this way, because it's two classes. So it's counting both of them. And it's looking for an element with a class of padding, which happens to have the class of padding. And anything with the class of padding has the class of padding by definition. And it's a little bit strange, but it's one of those things that does work. I wouldn't definitely not recommend abusing this in any way. But this could be really nice if you're just trying to troubleshoot something, and you just have that one thing that's getting in your way, and you need to fix it really fast. Maybe you could use this and then come up with a better solution once you sort of just got past that headache. So again, production, maybe you don't want to use this, but for certain random little situations that come up, it could be interesting. And it's just one of those fun things to know about CSS, and it's kind of quirky, but it can be kind of cool at the same time. And of course, these are all things that are infuriating that you can sort of make sense of why they work. There's another thing that's absolutely infuriating, which is collapsing margins. Some things about it sort of make sense. Other parts of it are just really frustrating. But it's one of those things that once you know about it, at least you can work with it. Now, if you don't know what they are, or you've run into them and they destroy view nets, I have a video that's dedicated to that right here for your viewing pleasure. And with that, a really big thank you to Zach, Randy, and Stuart, who are my supporters of awesome over on Patreon, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.