Confusing CSS behaviors that actually make sense

[Music] 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 counterintuitive 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 will 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'll see i have a div with a class of height in here because the first one 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 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 percent 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 fifty percent or i could change that to twenty percent 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 i don't know how big my section is and what's really interesting here too is if i had a paragraph and we add some content in here um 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 like 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 or 40 percent of that 200. um 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 2 which i already have ready uh 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 2 with a background back ground 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 in line 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 um 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 a2 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 you can see here it's sticking out the bottom now 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 write center center it's actually middle and that would line the text up with the middle of course you could do a top there might be 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 a 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 um 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 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 uh so let's just give this a height so we can actually see it height 100 pixels and you're gonna 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 percent that 50 percent here is base 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 um 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 the is taking up fifty percent of the whole thing because my margin left of fifty percent is fifty percent of the parent so it's interesting what this is if i do a margin margin top of fifty percent 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 enough lorem 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 percent 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 so 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 um just because we can come in and actually set them i'm going to reduce my text here a little bit because we have way too much to show this off uh so let's just take off my margin chop for now and if you need something you do an ass aspect ratio of one over one for 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 um 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 um 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 and 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 um 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 uh with a color of black so it goes back to something that's readable which red on green is not um so you can boost specificity this way uh because it's two classes so it's counting both of them and it's looking for a and you know an element with a class of padding which happens to have the class of padding and anything with a 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 uh 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 makes sense other parts of it are just really frustrating but it's one of those things that once you know about at least you can work with it now if you don't know what they are or you've run into them and they describe you nuts i have a video that's dedicated to that or 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 corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 27,736

Rating: 4.9823689 out of 5

Keywords: HTML, CSS, kevin powell, css strange behaviors, padding as percentage, height as a percentage, space under images, tutorial, css tutorial, specificity, css counterintuitive, why css

Id: kNtG5QZWFkM

Length: 12min 41sec (761 seconds)

Published: Tue Sep 14 2021